Dead simple jQuery pagination plugin [UPDATED]

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;

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

3 Responses to Dead simple jQuery pagination plugin [UPDATED]

  1. Tim Wright says:

    No demo? Couldn’t get this to work.

  2. Ken Phan says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>