Paginazione avanzata con Bootstrap

24 Agosto 2019

Bootstrap Programmazione Web

3 min.

394

Tra i numerosi componenti di Bootstrap possiamo trovarne uno per costruire un blocco di indici di pagina per implementare una paginazione. Tipicamente questo componente viene utilizzato quando si ha una lista di elementi che, per una ragione o per un’altra, non possono essere mostrati tutti in una singola pagina. In questo caso, come avviene per i motori di ricerca, vengono create più pagine con lo stesso template ma ognuna con elementi diversi, ordinati secondo qualche criterio.

La pagina di documentazione del componente Pagination presenta la versione base di questo strumento e alcune varianti, senza codice Javascript per permettere ai pulsanti di funzionare.

Nel caso in cui dobbiamo ricorrere alla paginazione per poche pagine, ciò basta.
In molti altri casi invece è necessario porre rimedio al problema che il numero di pagine è troppo grande per mostrare tutti i numeri nell’interfaccia utente.

Avendo riscontrato questo problema ho implementato un semplice algoritmo che permetta di “collassare” parte degli indici di pagina non necessari. Il risultato è mostrato immediatamente qui sotto.

See the Pen Advanced Pagination in Bootstrap by Lorenzo Vainigli (@lorenzovngl) on CodePen.

Questo algoritmo utilizza tre variabili:

Count; numero totale delle pagine da elencare.
Range: numero di indici che devono essere mostrati a destra e a sinistra della pagina corrente.
Page: pagina corrente, quella che l’utente sta visualizzando.

Codice Javascript

let count = 50;
let range = 3;
let page = 15;

if (page > 1){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page-1) + '">Previous</a></li>');
}
for (let i = 1; i <= count; i++){
  if (i == 1 && page-range > 1){
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./1">1</a></li>');
      if (page-range > 2){
        $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
  }
  if (i >= page-range && i <= page+range){
    if (i != page){
      $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + i + '">' + i + '</a></li>');
    } else {
      $('.pagination').append('<li class="page-item active"><a class="page-link" href=""./' + i + '"">' + i + '</a></li>');
    }
  }
  if (i == count && page+range < count){
    if (page+range < count-1){
      $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + count + '">' + count + '</a></li>'); 
  }
}
if (page < count){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page+1) + '">Next</a></li>');
}

Codice PHP

$count = 50;
$range = 3;
$page = 15;

if ($page > 1){
  echo '<li class="page-item"><a class="page-link" href="./'.($page-1).'">Previous</a></li>';
}
for ($i=1; $i<=$count; $i++){
  if ($i == 1 && $page-$range > 1){
    echo '<li class="page-item"><a class="page-link" href="./1">1</a></li>';
    if ($page-$range > 2){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
  }
  if ($i >= $page-$range && $i <= $page+$range){
    if ($i != $page){
      echo '<li class="page-item"><a class="page-link" href="./'.$i.'">'.$i.'</a></li>';
    } else {
      echo '<li class="page-item active"><a class="page-link" href=""./'.$i.'"">'.$i.'</a></li>';
    }
  }
  if ($i == $count && $page+$range < $count){
    if ($page+$range < $count-1){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
    echo '<li class="page-item"><a class="page-link" href="./'.$count.'">'.$count.'</a></li>';
  }
}
if ($page < $count){
  echo '<li class="page-item"><a class="page-link" href="./'.($page+1).'">Successiva</a></li>';
}

Dipendenze (Bootstrap 4.0.0)

CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Javascript

https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js