All Marked Up / Projects / jQuery Event-driven Pagination

Please note that these docs and demo pages are still under development!

Overview - what this plugin does (and doesn't do):

This plugin makes it possible to paginate pretty much any group of objects on a page.

It does make the element it was called on respond to a set of custom DOM events that can be used to control the pagination, display page counts, refresh the list contents and so on.
It does not (out-of-the-box) provide a set of controls to do the pagination, or display the page count or suchlike.

Why does is work like this? Simple answer: flexibility. Plugins where you have to pass in a set of IDs or jQuery objects for controlling things like previous and next functionality are inherently limiting. Once applied to a set of elements, this plugin instead lets you decide what elements or interactions will trigger it's behaviour, and what elements (if any) display information on the page count and current page, etc. You can make it work on hover, on click, on double click, whatever you want.

Download:

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

• jQuery.evtpaginate.js

Demos:

View the demo page for lots of code samples and demonstrations.

General Setup

This plugin needs to be called on a DOM element that contains the set of child elements that you wish to paginate - for instance on a DIV that wraps a number of IMG elements, or on a UL that wraps a number of LIs.

Example markup:

<ul id="wrapper"> 
	<li>one</li>
	<li>two</li> 
	<li>three</li> 
	<li>four</li> 
	<li>five</li> 
	<li>six</li> 
	<li>seven</li> 
	<li>eight</li> 
	<li>nine</li> 
	<li>ten</li> 
</ul>

Example JS:

$(function(){
	
	$('#wrapper').evtpaginate({perPage:3});
	
});

Once this is done, you paginated list of elements will now respond to custom DOM events that can be triggered on the parent element. Some custom events will also be triggered by the plugin at certain times - more details below.

The parent element will respond to the following events:

• next.evtpaginate - go to the next page // $('myWrapper').trigger('next.evtpaginate');
• prev.evtpaginate - go to the previous page // $('myWrapper').trigger('prev.evtpaginate');
• first.evtpaginate - go to the first page // $('myWrapper').trigger('first.evtpaginate');
• last.evtpaginate - go to the last page // $('myWrapper').trigger('last.evtpaginate');
• show.evtpaginate - go to the specified page // $('myWrapper').trigger('show.evtpaginate', 2 );
• refresh.evtpaginate - refresh the pagination (call after adding or removing items from the list, or to change the plugin's settings) // $('myWrapper').trigger('refresh.evtpaginate', {perPage:4} );

This plugin will trigger the following events:

• initialized.evtpaginate - triggered once the plugin setup is completed
• finished.evtpaginate - triggered just before a pagination event takes place (i.e. before it moves to a new page)
• finished.evtpaginate - triggered once a pagination event finishes (i.e. after it has moved to a new page)

Note these events are all namespaced under the 'evtpaginate' namespace.

Please check out the demo page help you understand better how these event interactions all work!!

Changelog

03.01.10 - 1.0 Release.