Pagination is one of those things that everyone hates implementing on their websites, and that we avoid doing until the data size calls for it. Or until the page is so long that the scroll wheel breaks off and the browser crashes. And for good reason. It's a somewhat tedious and needlessly complicated task normally. But a very much needed tedious and complicated task. The following script is designed to handle any and all client side pagination for HTML tables once and for all.
For a closer look at how the pagination logic works, feel free to check out my other blog post right over here.
Feel free to use it and modify in any way that you wish as long as it helps you on your coding journey. All I ask, is that you throw some kind words my way if you do.
Before we start, if you are relatively new to JavaScript, then I recommend Web Design with HTML, CSS, JavaScript and jQuery as a good set of books and a good starting point to get you started.
And here is a quick example of the pagination in action for your viewing pleasure.
2 rows per page
How it works
The entire process is very simple and obfuscates much of the complexity from the developer. Just add the script to your site and follow the following steps, and you'll have instant client side pagination, in under 100 lines of code.
1. Add the pagination class to each table that you want to add a pagination to.
2. Set the number of record elements per page, per table, in a dataset value named data-pagecount as such:
<table class="pagination" data-pagecount="3">
And that is it. Pagination complete as this script handles the rendering logic. Here are a few more examples of it in action using different data set sizes.
2 records per page
3 records per page
This is solely a client side implementation I must mention again and suited for small data sets. If you're dealing with thousands of records, then for sure you will need a server side implementation. Which I will cover in a future post.
In the meantime however, enjoy the script and use it as you will. Happy coding!
<script>
var perPage = 20;
function genTables() {
var tables = document.querySelectorAll(".pagination");
for (var i = 0; i < tables.length; i++) {
perPage = parseInt(tables[i].dataset.pagecount);
createFooters(tables[i]);
createTableMeta(tables[i]);
loadTable(tables[i]);
}
}
// based on current page, only show the elements in that range
function loadTable(table) {
var startIndex = 0;
if (table.querySelector('th'))
startIndex = 1;
console.log(startIndex);
var start = (parseInt(table.dataset.currentpage) * table.dataset.pagecount) + startIndex;
var end = start + parseInt(table.dataset.pagecount);
var rows = table.rows;
for (var x = startIndex; x < rows.length; x++) {
if (x < start || x >= end)
rows[x].classList.add("inactive");
else
rows[x].classList.remove("inactive");
}
}
function createTableMeta(table) {
table.dataset.currentpage = "0";
}
function createFooters(table) {
var hasHeader = false;
if (table.querySelector('th'))
hasHeader = true;
var rows = table.rows.length;
if (hasHeader)
rows = rows - 1;
var numPages = rows / perPage;
var pager = document.createElement("div");
// add an extra page, if we're
if (numPages % 1 > 0)
numPages = Math.floor(numPages) + 1;
pager.className = "pager";
for (var i = 0; i < numPages ; i++) {
var page = document.createElement("div");
page.innerHTML = i + 1;
page.className = "pager-item";
page.dataset.index = i;
if (i == 0)
page.classList.add("selected");
page.addEventListener('click', function() {
var parent = this.parentNode;
var items = parent.querySelectorAll(".pager-item");
for (var x = 0; x < items.length; x++) {
items[x].classList.remove("selected");
}
this.classList.add('selected');
table.dataset.currentpage = this.dataset.index;
loadTable(table);
});
pager.appendChild(page);
}
// insert page at the top of the table
table.parentNode.insertBefore(pager, table);
}
window.addEventListener('load', function() {
genTables();
});
</script>
Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.
Stay up to date
Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.