This is an extremely simple jQuery plugin for paginating over lists of items. It uses the jQuery.slice() function to reveal the appropriate section of the list, which means it should work fine with dynamic or sortable lists.
/**
* jQuery UI paginatio plugin
* Copyright (c) 2009 Christopher Beer
* Date: 04/15/09
*
* @projectDescription Simple jQuery pagination plugin
*
* @author Chris Beer - chris@ratherinsane.com
* @version 0.1
*
* @example $('ui.dropdown').paginate( );
*
* Depends:
* ui.core.js
*/
(function($) {
$.widget("ui.paginate", {
_init: function() {
var self = this, o = this.options;
this.$container = $(this.element);
this.nav();
this.page(0);
},
page: function(i) {
o = this.options;
max = Math.ceil(this.length() / o.itemsPerPage) - 1;
min = 0;
this.pg = Math.max(Math.min(i, max), min);
if (this.pg == max) {
o.pager.find("." + o.next).addClass('disabled');
} else {
o.pager.find("." + o.next).removeClass('disabled');
}
if (this.pg == min) {
o.pager.find("." + o.prev).addClass('disabled');
} else {
o.pager.find("." + o.prev).removeClass('disabled');
}
this.$container.children().hide().slice(this.pg * o.itemsPerPage,
(this.pg + 1) * o.itemsPerPage).show();
return this.pg;
},
next: function() {
o = this.options;
return this.page(this.pg + 1);
},
prev: function() {
return this.page(this.pg - 1);
},
nav: function() {
var self = this, o = this.options;
if (o.pager === null) {
o.pager = $('
');
o.pager.insertBefore(this.element);
}
var pagerNav = $('« PrevNext »');
$(o.pager).append(pagerNav);
nextbut = o.pager.find("." + o.next);
prevbut = o.pager.find("." + o.prev);
nextbut.click( function() {
self.next();
return false;
});
prevbut.click( function() {
self.prev();
return false;
});
},
length: function() {
return this.$container.children().length;
},
itemsPerPage: function(i) {
if (i != undefined) {
this.options.itemsPerPage = i;
}
return this.options.itemsPerPage;
}
});
$.extend($.ui.paginate, {
version : '1.6rc6',
getters : 'nav length',
defaults : {
itemsPerPage : 5,
pager : null,
prev : 'prev',
next : 'next'
}
});
})(jQuery);
—-
Update: There was an off-by-one error in the original code — max = Math.floor([...]); should be max = Math.ceil([...])-1;
No demo? Couldn’t get this to work.
I’ve put together a simple demo at http://cbeer.info/~chris/pagination.html.. Hope that helps.
What version of jQuery UI are you using? I didn’t do a thorough test, but it looks like 1.5 might not work without modification.
Hello !
If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.
Download it here: kenphan.info/download.jpager.rar