This plugin has been updated with new features. Check out the blog post for the update
In a recent project, a need came up for a very simple jQuery paging plugin that would page between a small amount of data on the client side. A quick search online didn't find any suitable candidates, so naturally we decided the best thing to do was to write one.
Introducing quickPager, simple jquery pager plugin.
A few caveats before dishing out the code - simplePager was written for a distinct set of requirements, and we're releasing it here as much as a learning tool as a fully formed jQuery plugin.
- Before using a client-side javascript pager, decide if server-side paging wouldn't suit your needs more. Server-side paging is usually recommended
- This plugin will only work on one element per page
- This plugin breaks chaining (!)
So whilst it's definitely far from perfect, this little plugin fulfills the need for an easy to use, lightweight client-side pager.
Here's the code:
//-------------------------------------------------
// Quick Pager jquery plugin
// www.geckonewmedia.com
//-------------------------------------------------
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 10,
currentPage: 1,
holder: ""
};
var options = $.extend(defaults, options);
//leave this
var selector = $(this);
var totalRecords = $(this).children().length;
var pageCounter = 1;
selector.children().each(function(i){
if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass("page"+pageCounter);
}
else {
$(this).addClass("page"+(pageCounter+1));
pageCounter ++;
}
});
//show/hide the appropriate regions
selector.children().hide();
$(".page"+options.currentPage).show();
//first check if there is more than one page. If so, build nav
if(pageCounter > 1) {
//Build pager navigation
var pageNav = "";
for (i=1;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += "- "+i+"
";
}
else {
pageNav += "- "+i+"
";
}
}
pageNav += "
";
if(options.holder == "") {
selector.after(pageNav);
}
else {
$(options.holder).append(pageNav);
}
//pager navigation behaviour
$(".pageNav a").live("click", function() {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
//remove current current (!) page
$("li.currentPage").removeClass("currentPage");
//Add current page highlighting
$(this).parent("li").addClass("currentPage");
//hide and show relevant links
selector.children().hide();
selector.find(".page"+clickedLink).show();
return false;
});
}
}
})(jQuery);
Options
There are deliberately few options for the script - they are as follows:
- pageSize: The amount of items per page (default 10)
- currentPage: Want to start on a page other than one? Put it in here
- Holder: By default the paging nav will be inserted after the chosen element to be paged. This allows you to create en element to hold the nav
Usage
The default usage is as follows
$(document).ready(function() {
$(ul.pageme").quickPager();
});
This will page an unordered list with the default options. (demo)
$(document).ready(function() {
$("table.pageme tbody").quickPager( {
pageSize: 5,
currentPage: 1,
holder: ".pager"
});
});
The above code will page table rows (provided a tbody element is used) with 5 rows per page, putting the navigation into an element with a class of "pager". (demo)
Download the plugin and demos here.
