jQuery - Enabling the Pager Buttons

To make these new buttons actually work, we need to update the currentPage variable and then run our pagination routine. At first blush, it seems we should be able to do this by setting currentPage to page, which is the current value of the iterator that creates the buttons:

$(document).ready(function() { 
 
$('table.paginated').each(function() { 
 
var currentPage = 0; 
 
var numPerPage = 10; 
 
var $table = $(this);
 
var repaginate = function() { 
 
$table.find('tbody tr').show() 
 
.lt(currentPage * numPerPage) 
 
.hide() 
 
.end() 
 
.gt((currentPage + 1) * numPerPage - 1) 
 
.hide() 
 
.end(); 
 
}; 
 
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>') 
 
.click(function() { 
 
currentPage = page; 
 
repaginate(); 
 
}) 
 
.appendTo($pager).addClass('clickable'); 
 
} 
 
$pager.insertBefore($table); 
 
repaginate(); 
 
}); 
 
});

This mostly works. The new repaginate() function is called when the page loads and when any button is clicked. All of the buttons take us to a page with no rows on it, though:

The problem is that in defining our click handler, we have created a closure. The click handler refers to the page variable, which is defined outside the function. When the variable changes the next time through the loop, this affects the click handlers that we have already set up for the earlier buttons. The net effect is that, for a pager with 7 pages, each button directs us to page 8 (the final value of page). More information on how closures work can be found in Appendix C, JavaScript Closures.

To correct this problem, we'll take advantage of one of the more advanced features of jQuery's event binding methods. We can add a set of data to the handler when we bind it that will still be available when the handler is eventually called. With this capability in our bag of tricks, we can write:

Learning jQuery - Enabling the Pager Buttons

Tags