jQuery Plugin: tablePager
Here's a quick table pager plugin for jQuery. Unlike a number of the other plugins out there, this one doesn't alter the DOM tree of the table itself it just hides the rows that are not available for the current page. In this way you can still get access to all the elements of the table throughout the lifetime of the page.
Plugin Source:
(function($) {
$.fn.tablePager = function(options) {
/*
options = {
firstBtn: Element,
prevBtn: Element,
nextBtn: Element,
lastBtn: Element,
indicator: Element,
sizeSelect: Element,
pageSize: Number,
onPageChange: Callback,
onPageSizeChange: Callback
};
*/
var tbl = this;
var defaults = { pageSize: 10 };
var opts = $.extend(defaults, options);
var pageIndex = 0;
var pageSize = opts.pageSize;
var rowCount = getRows().length;
var pageCount = getPageCount();
function init() {
bindControlHandlers();
updatePaging();
updateIndicator();
}
function getRows() {
return tbl.find("tbody tr");
}
function bindControlHandlers() {
if (opts.firstBtn) {
opts.firstBtn.unbind().bind("click",
function() { changePage(0); });
}
if (opts.prevBtn) {
opts.prevBtn.unbind().bind("click",
function() { changePage(pageIndex - 1); });
}
if (opts.nextBtn) {
opts.nextBtn.unbind().bind("click",
function() { changePage(pageIndex + 1); });
}
if (opts.lastBtn) {
opts.lastBtn.unbind().bind("click",
function() { changePage(pageCount - 1); });
}
if (opts.sizeSelect) {
opts.sizeSelect.unbind().bind("change",
function() { changePageSize(parseInt($(this).val())); });
}
}
function getPageCount() {
return (rowCount % pageSize) ?
Math.floor(rowCount / pageSize) + 1 : (rowCount / pageSize);
}
function changePage(toIndex) {
if (toIndex >= 0 && toIndex = start && i
Usage:
var pager = $("#testTable").tablePager({
firstBtn: $(".first"), // The element that pages to the first page
prevBtn: $(".prev"), // The element that pages to the previous page
nextBtn: $(".next"), // The element that pages to the next page
lastBtn: $(".last"), // The element that pages to the last page
indicator: $(".curpage"), // The input element that stores the current page (i.e. "1/5")
sizeSelect: $(".pagesize"), // The select element that indicates the current page size
pageSize: 5, // The initial page size
onPageChange: function(newIndex) { alert(newIndex); }, // Page change callback
onPageSizeChange: function(newSize) { alert(newSize); } // Page size change callback
});
pager.changePage(2); // Causes the page to change from outside the plugin
var pageIndex = pager.getPageIndex(); // Returns the current page index
var pageSize = pager.getPageSize(); // Returns the current page size
And here's some example markup for the pager elements:
First
Prev
Next
Last
5
10
20
As you can see it's really simple and flexible. You can supply any elements you want to the pager. If you don't supply a first and last button elements for example then those will be ignored, if you don't specify an indicator then that will be ignored too. The most important thing is that your DOM stays intact, this allows you to continue to manipulate the "hidden" portions of the table (i.e. the stuff not on the current page) without having to access some crazy expando property that other pager plugins use to stash the un-shown portions of the table.
As always, I'd appreciate any feedback.