Pagination
Build a dynamic pagination widget that renders page buttons and triggers AJAX page loads.
jQuery
Intermediate
4 min read
Pagination Widget
Example
function renderPagination(current, total, onClick) {
const $pager = $("<nav aria-label=Pagination>").append("<ul class=pagination>");
const $ul = $pager.find("ul");
function page(n, label, disabled, active) {
$ul.append(`<li class="page-item${disabled?" disabled":""}${active?" active":""}">
<a class="page-link" href="#" data-page="${n}">${label}</a></li>`);
}
page(current-1,"«",current===1);
for (let i = 1; i <= total; i++) page(i, i, false, i===current);
page(current+1,"»",current===total);
$ul.on("click","a",function(e){ e.preventDefault(); onClick(+$(this).data("page")); });
return $pager;
} Pro Tip
Aria-label on the nav and aria-current="page" on the active link make pagination screen-reader friendly.