Advanced Pagination with Bootstrap
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 ๐จ๐ปโ๐ป
๐ผ Software developer
๐ Master's degree in computer science
๐ค Artificial intelligence
๐ง Machine learning
๐ Data Analysis
๐ Web development
๐ฑ Android development
๐ช Astronomy
๐ฏ๐ต Japanese culture
๐ฅ Martial arts
๐ฎ Videogames
๐ธ Photography