<p>
Static example (html only)
<nav aria-label="Pagina navigatie">
<ul class="pagination">
<li class="page-item page-item-previous disabled">
<a class="page-link" href="" aria-disabled="true">
<span aria-hidden="true"><span class="mdi mdi-chevron-left" aria-hidden="true"></span></span>
<span class="sr-only">Vorige</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="">1 <span class="sr-only">(huidig)</span></a>
</li>
<li class="page-item">
<a class="page-link" href="">2</a>
</li>
<li class="page-item">
<a class="page-link" href="">3</a>
</li>
<li class="page-item page-item-next">
<a class="page-link" href="">
<span aria-hidden="true"><span class="mdi mdi-chevron-right" aria-hidden="true"></span></span>
<span class="sr-only">Volgende</span>
</a>
</li>
</ul>
</nav>
</p>
<p>
Dynamic example (with pagination script)
<nav aria-label="Pagina navigatie">
<ul class="pagination" id="paginationExample">
<li class="page-item page-item-previous">
<a class="page-link" href="">
<span aria-hidden="true"><span class="mdi mdi-chevron-left" aria-hidden="true"></span></span>
<span class="sr-only">Vorige</span>
</a>
</li>
<li class="page-item page-item-next">
<a class="page-link" href="">
<span aria-hidden="true"><span class="mdi mdi-chevron-right" aria-hidden="true"></span></span>
<span class="sr-only">Volgende</span>
</a>
</li>
</ul>
</nav>
</p>
<script id="pagination-item-template" type="text/template"></script>
<script id="pagination-item-current-template" type="text/template"></script>
Based on the version from MDB:
https://mdbootstrap.com/components/pagination/#disabled-active
No additional actions, aside from the markup, are needed to use this component.
To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the search results and the search result script itself.
Both scripts need to be placed in the Additional component(s) script
section as documented in How to use.
You need to instantiate the Pagination
class with the following parameters:
Then call the show
method with the current page as a parameter to show the results.
<script>
var pagination = new Pagination(10, '#{page}', 5);
$(document).ready(function () {
pagination.init('#paginationExample');
pagination.show(1);
$(window).on('hashchange', function () {
var page = parseInt(window.location.hash.slice(1));
pagination.show(page, 10);
})
});
</script>
<script>
function Pagination(numberOfPages, link, maxNumberOfPages) {
this.maxNumberOfPages = maxNumberOfPages ? maxNumberOfPages : 9;
this.numberOfPages = numberOfPages;
this.paginateList;
this.paginateItemTemplate = $.parseHTML($('#pagination-item-template').html());
this.paginateItemCurrentTemplate = $('#pagination-item-current-template').html();
this.link = link;
}
Pagination.prototype.init = function (selector) {
this.paginateList = $(selector);
}
Pagination.prototype.show = function (currentPage) {
$('.page-item:not(:first-child):not(:last-child)', this.paginateList).remove();
var showPages = this.getPagesToShow(currentPage);
for (key in showPages) {
var page = showPages[key];
var paginateItem = $(this.paginateItemTemplate).clone();
$('.page-link', paginateItem).text(page);
$('.page-link', paginateItem).attr('href', this.link.replace('{page}', page));
if (page === currentPage) {
$(paginateItem).addClass('active');
$('.page-link', paginateItem).append(this.paginateItemCurrentTemplate);
}
$('.page-item-next', this.paginateList).before(paginateItem);
}
if (currentPage === 1) {
this.showButton($('.page-item-next', this.paginateList), currentPage + 1);
this.hideButton($('.page-item-previous', this.paginateList));
} else if (currentPage === this.numberOfPages) {
this.showButton($('.page-item-previous', this.paginateList), currentPage - 1);
this.hideButton($('.page-item-next', this.paginateList));
} else {
this.showButton($('.page-item-next', this.paginateList), currentPage + 1);
this.showButton($('.page-item-previous', this.paginateList), currentPage - 1);
}
}
Pagination.prototype.getPagesToShow = function (currentPage) {
var showPages = [];
var left = 0;
var right = 0;
for (var i = currentPage - this.maxNumberOfPages - 1; i <= currentPage + this.maxNumberOfPages - 1; i++) {
if (i <= 0 || i > this.numberOfPages) {
continue;
}
showPages.push(i);
if (i < currentPage) {
left++;
} else if (i > currentPage) {
right++;
}
}
while (showPages.length > this.maxNumberOfPages) {
if (left > right) {
showPages.shift();
left--;
} else {
showPages.pop();
right--;
}
}
return showPages;
}
Pagination.prototype.hideButton = function (button) {
$(button).addClass('disabled');
$('.page-link', button)
.attr('href', '')
.attr('aria-disabled', 'true');
}
Pagination.prototype.showButton = function (button, page) {
$(button).removeClass('disabled');
$('.page-link', button)
.attr('href', this.link.replace('{page}', page))
.attr('aria-disabled', 'false');
}
</script>