Pagination State
Keep track of current page and total pages with .data() on the pagination container to update button states correctly.
jQuery
Intermediate
4 min read
Pagination State with .data()
Example
$("#pager").data({ page: 1, total: 10 });
function updatePager() {
const p = $("#pager").data("page");
const t = $("#pager").data("total");
$("#prevBtn").prop("disabled", p === 1);
$("#nextBtn").prop("disabled", p === t);
$("#pageInfo").text(`Page ${p} of ${t}`);
}
$("#nextBtn").on("click", function() {
const data = $("#pager").data();
if (data.page < data.total) {
$("#pager").data("page", data.page + 1);
loadPage(data.page + 1);
updatePager();
}
}); Pro Tip
Store related state properties together: .data({ page, total, perPage }) for clean access.