Lorenzo Vainigli

Software developer, passionate about programming

Advanced Pagination with Bootstrap

27 August 2019
  3 min.     338

Questo articolo รจ disponibile in italiano

Among the many components of Bootstrap we can find one to build a block of page indexes to implement a pagination. Typically this component is used when you have a list of elements that, for one reason or another, can not be shown all in one page. In this case, as with search engines, several pages are created with the same template but each with different elements, sorted by some criteria.

The Pagination Component Documentation Page presents the basic version of this tool and some variants, without Javascript code to allow the buttons to work.

In case we have to use pagination for a few pages, that’s enough.
In many other cases, however, it is necessary to achieve the problem that the number of pages is too large to show all the numbers in the user interface.

Having found this problem I implemented a simple algorithm that allows to “collapse” part of the unnecessary page indexes. The result is shown immediately below.

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

This algorithm uses three variables:

  • Count: total number of pages to be listed.
  • Range: number of indices to be shown on the left and on the right of the current page.
  • Page: current page, the one that the user is viewing.

Javascript code

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>');
}

PHP code

$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>';
}

Dependencies (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

Hi ๐Ÿ‘‹, I'm Lorenzo ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

๐Ÿ‡ฎ๐Ÿ‡น Italian
๐Ÿ’ผ Software developer
๐ŸŽ“ Master's degree in computer science

Tech interests
๐Ÿค– Artificial intelligence
๐Ÿง  Machine learning
๐Ÿ“Š Data Analysis
๐ŸŒ Web development
๐Ÿ“ฑ Android development
Other interests
๐Ÿช Astronomy
๐Ÿ‡ฏ๐Ÿ‡ต Japanese culture
๐Ÿฅ‹ Martial arts
๐ŸŽฎ Videogames
๐Ÿ“ธ Photography

More about me