jQuery Quick Pagination

Please note: This plugin has now been deprecated and replaced with my jQuery Event-Driven Pagination plugin. Please use that instead!

Overview

A jQuery plugin that allows you to quickly and easily paginate almost any set of elements on a page. Super-easy to implement, provides very stripped down prev/next navigation elements with optional page count display.

Current version: 1.0.1
Dependancies: jQuery 1.2 or greater (may work with earlier releases but untested!)
Licence: Released under a MIT-style licence.

Download:

jQuery.quickpaginate.zip (all files, including packed version and docs)
jQuery.quickpaginate.js (unpacked, good for development use, 8kb)
jQuery.quickpaginate.packed.js (packed, good for production use, 4kb)

Bugs and Feature Requests

Please add all bug reports or feature requests to this plugin's page on the jQuery site or leave a comment on the introductory blog post at allmarkedup.com.

Demos:

View the demo page for code samples and demonstrations.

Usage Notes

The plugin can be used to paginate pretty much any set of elements on a page. Simply call the plugin on a jQuery DOM object collection once the DOM is ready and it will take care of the rest! A settings object can be passed in to customise the behaviour (see below for setting options).

The prev/next buttons will by default be placed after the last item in the collection, but you can easily change this by passing another jQuery DOM object collection in and the links will be appended within all of the specified elements.

The main settings options are as follows:

perpage (int) : The number of items to include per 'page' - default => 10
pager (object) : A collection of jQuery DOM objects to append the prev/next/counter items within - if not specified will be appended after last item in pagination list.
showcounter (boolean) : Whether or not to show the page count (i.e. 1/4, 2/4 etc) - default => true

You can also customise the class names of the prev/next and counter elements in the settings object, should you not wish to use the defaults.

prev : The class name for the 'prev' link(s) - default => "qp_next"
next : The class name for the 'next' link(s) - default => "qp_prev"
counter : The class name for the span that wraps the counter - default => qp_counter
totalnumber : The class name for the span that wraps the total number of pages - default => "qp_totalnumber"
pagenumber : The class name for the span that wraps the current page count - default => "qp_pagenumber"

Code Examples (see the demo page to see the plugin in action)


jQuery('.news_item').quickpaginate(); // would paginate all items on the page with the class of 'news_item'

jQuery('div#quick_slideshow img').quickpaginate(); // would paginate all img elements within the div with an id of 'quick_slideshow'

// Paginate everything with the class of "news_item",
// 5 per 'page' and without the page counter.
jQuery('.news_item').quickpaginate( { perpage: 5, showcounter: false } ); 

// Paginate all img elements and the element with the id of "info",
// with the prev/next/counter element appended to the element with the id of "pager_here"
jQuery('img, #info').quickpaginate({ pager : $("#pager_here") });

Changelog

11.11.08 - Fixed counter problem with multiple instances on one page (thanks to Blaine for the heads up)

01.11.08 - Fixed bug due to extra closing div in pager (thanks to Brian Rhinehart)

28.10.08 - 1.0 Release.