One thing to note about this plugin, which a few people may get confused about, is that it technically doesn’t implement pagination itself. It generates a page navigator and provides the means, via jQuery events, to simply hook it up to our own pagination functionality.
Assuming you’ve followed the steps 1 (and 2 if you want the CSS styling) required from the simplePagination link you included in your question then the following jQuery will do what you need:
jQuery(function($) {
// Consider adding an ID to your table
// incase a second table ever enters the picture.
var items = $("table tbody tr");
var numItems = items.length;
var perPage = 2;
// Only show the first 2 (or first `per_page`) items initially.
items.slice(perPage).hide();
// Now setup the pagination using the `.pagination-page` div.
$(".pagination-page").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
// EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
// More thoroughly explained (including the regular expression) in:
// https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html
// We'll create a function to check the URL fragment
// and trigger a change of page accordingly.
function checkFragment() {
// If there's no hash, treat it like page 1.
var hash = window.location.hash || "#page-1";
// We'll use a regular expression to check the hash string.
hash = hash.match(/^#page-(\d+)$/);
if(hash) {
// The `selectPage` function is described in the documentation.
// We've captured the page number in a regex group: `(\d+)`.
$(".pagination-page").pagination("selectPage", parseInt(hash[1]));
}
};
// We'll call this function whenever back/forward is pressed...
$(window).bind("popstate", checkFragment);
// ... and we'll also call it when the page has loaded
// (which is right now).
checkFragment();
});
You can find a running example here, and a more thorough guide on simplePagination here if you want to more thoroughly understand how this all actually works.
EDIT: Added a section of code to handle URL fragments (on reload and on back/forward) as Mike O’Connor highlighted the need for. You can see a live example of URL fragment handling here.
EDIT 2: If you need cross-browser compatibility for the back/forward fragment updating (i.e. IE11…), include the History.js script before implementing the above code. Thanks to Mike O’Connor for that 🙂
EDIT 3: If you’re dynamically adding or removing content you’ll need to manually update the paginator to reflect these changes. I’ve whipped up an example for that too. You can see it running here.