jQuery - JavaScript Pagination

Let's examine how we would add JavaScript pagination to the table we have already made sortable in the browser. First, we'll focus on displaying a particular page of data, disregarding user interaction for now:

$(document).ready(function() { 
 
$('table.paginated').each(function() { 
 
var currentPage = 0; 
 
var numPerPage = 10; 
 
var $table = $(this); 
 
$table.find('tbody tr').show() 
 
.lt(currentPage * numPerPage) 
 
.hide() 
 
.end() 
 
.gt((currentPage + 1) * numPerPage - 1) 
 
.hide() 
 
.end(); 
 
}); 
 
});

This code displays the first page—ten rows of data.

Once again we rely on the presence of a &tl; tbody > element to separate data from headers; we don't want to have the headers or footers disappear when moving on to the second page. For selecting the rows containing data, we show all the rows first, then select the rows before and after the current page, hiding them.

The method chaining supported by jQuery makes another appearance here when we filter the set of matched rows twice, using .end() in between to pop the current filter off the stack and start afresh with a new filter.

The most error-prone task in writing this code is formulating the expressions to use in the filters. To use the .lt() and .gt() methods, we need to find the indices of the rows at the beginning and end of the current page. For the beginning row, we just multiply the current page number by the number of rows on each page.

Multiplying the number of rows by one more than the current page number gives us the beginning row of the next page; to find the last row of the current page, we must subtract one from this.

Displaying the Pager

To add user interaction to the mix, we need to place the pager itself next to the table. We could do this by simply inserting links for the pages in the HTML markup, but this would violate the progressive enhancement principle we've been espousing. Instead, we should add the links using JavaScript, so that users without scripting available are not misled by links that cannot work.

To display the links, we need to calculate the number of pages and create a corresponding number of DOM elements:

var numRows = $table.find('tbody tr').length; 
 
var numPages = Math.ceil(numRows / numPerPage); 
 
var $pager = $('</p>
<div class="pager"></div>
'); 
 
for (var page = 0; page < numPages; page++) { 
 
$('<span class="page-number">' + (page + 1) + '</span>') 
 
.appendTo($pager).addClass('clickable'); 
 
} 
 
$pager.insertBefore($table);

The number of pages can be found by dividing the number of data rows by the number of items we wish to display on each page. If the division does not yield an integer, we must round the result up using Math.ceil() to ensure that the final partial page will be accessible. Then, with this number in hand, we create buttons for each page and position the new pager before the table:

Learning jQuery - JavaScript Pagination

Displaying the Pager

Tags