jQuery: table pagination

Paginating a table with jQuery requires only the use of a repeated CSS class used as placeholder for our table rows. Most of all, tables must be properly marked up using thead and tbody. Otherwise, selecting rows becomes quite troublesome. Let's see the details.

Our table has 4 columns and 30 rows. We want 3 pages with 10 rows each. We're not interested in the first row of the table containing table headings. Let's define a Paginator object where we first declare a reference to the table and the number of pages to create:

var Paginator = new function() {

	var table = $('#paginated');
	var numberOfPages = 3;
	
}();

Why objects?

It's all about code reuse, maintainability and the like.

Now we can use the modulus operator to select only the rows which are multiple of 10:

var generate = function() {
	
		$('tbody tr', table).each(function() {
		
			var $tr = $(this);
			
			if($tr.index() % 10 == 0) {
			
			
			
				$tr.addClass('page');			   			
			}
		
		
		});
		
	
};

Now we have a brand new set of table row classes, namely tr.page. We can create pagination links by setting thei rel attribute to an incremental value which matches the current index of our table row in the set:

var paginate = function() {
	
		$('tr.page', table).each(function(i) {
		
			var $a = $('<a/>').attr({href: '#', rel: i}).text(i+1);
			$a.appendTo('#pagination');
			
			return i < (numberOfPages - 1);
		
		
		});	
				
	    $('tbody tr', table).hide();
};

This needs an explanation:

1. We got 3 pages, so the index in the tr.page set must be less than 3 (the loop's index starts from 0)
2. The rel attribute is set to that index (0, 1, 2)
3. The link's text is set to the index's value plus one, so we have 1, 2, 3
4. We exit from the loop with the return statement when the index is less than 3 (i.e. numberOfPages minus 1)
5. All table rows, except the very first one containing table headings, are hidden.

Then we can associate an action to each link:

var showPages = function() {
	
		$('a', '#pagination').each(function() {
		
			var $a = $(this);
			var rel = $a.attr('rel');
			var pages = $('tr.page', table);
			
			$a.click(function(event) {
			
			    $('tr', table).not(':first').slideUp();
			
				pages.eq(rel).nextUntil('tr.page').andSelf().
				slideDown('slow');
			
				event.preventDefault();
			});
		
		
		});
	
	
};

We use the rel attribute to select the current class in the row set and we call the nextUntil() method to select the current row together with all of its subsequent siblings up to the next row with class page.

Finally, init() runs everything:

this.init = function() {
	
		generate();
		paginate();
		showPages();
	
};

We invoke our object as follows:

$(function() {

	Paginator.init();

});

You can see the demo below.

Demo

Live demo