Learning jQuery - Marking the Current Page

Our pager can be made more user-friendly by highlighting the current page number. We just need to update the classes on the buttons every time one is clicked:

var $pager = $('</p>
<div class="pager"></div>
'); 
 
for (var page = 0; page < numPages; page++) { 
 
$('<span class="page-number">' + (page + 1) + '</span>') 
 
.bind('click', {'newPage': page}, function(event) { 
 
currentPage = event.data['newPage']; 
 
repaginate(); 
 
$(this).addClass('active').siblings().removeClass('active'); 
 
}) 
 
.appendTo($pager).addClass('clickable'); 
 
} 
 
$pager.find('span.page-number:first').addClass('active'); 
 
$pager.insertBefore($table); 
   

Paging with Sorting

We began this discussion by noting that sorting and paging controls needed to be aware of one another to avoid confusing results. Now that we have a working pager, we need to make sort operations respect the current page selection.

Doing this is as simple as calling our repaginate() function whenever a sort is performed. The scope of the function, though, makes this problematic. We can't reach repaginate() from our sorting routine because it is contained inside a different $(document).ready() handler. We could just consolidate the two pieces of code, but instead let's be a bit sneakier. We can decouple the behaviors, so that a sort calls the repaginate behavior if it exists, but ignores it otherwise. To accomplish this, we'll use a handler for a custom event.

In our earlier event handling discussion, we limited ourselves to event names that were triggered by the web browser, such as click and mouseup. The .bind() and .trigger() methods are not limited to these events, though; we can use any string as an event name. In this case, we can define a new event called repaginate as a stand-in for the function we've been calling:

$table.bind('repaginate', function() { 
 
$table.find('tbody tr').show() 
 
.lt(currentPage * numPerPage) 
 
.hide() 
 
.end()
 
.gt((currentPage + 1) * numPerPage - 1) 
 
.hide() 
 
.end(); 
 
}); 
   

$table.trigger('repaginate');  
   

We can issue this call in our sort code as well. It will do nothing if the table does not have a pager, so we can mix and match the two capabilities as desired.

TrackBack URI for this entry

Comments (0)

Subscribe to this comment's feed

Show/Hide comments

Show/Hide comment form