easyPaginate.JS

jQuery plugin to paginate anything in no time

Introduction

jQuery.easyPaginate is a plugin to paginate pretty anything, like lists, links etc...
easyPaginate is pretty lightweight (10kb uncompressed), have some usefull options and is compatible with Chrome Chrome, Firefox Firefox, Opera Opera and Safari Safari.
I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.

Getting Started

Download the code here (github repo)
Then, include jQuery and the jquery.easyPaginate.js code you just download into your page like this :

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.easyPaginate.js"></script>

HTML

Simple list of images

<div id="easyPaginate">
    <img src="img/demo/surf1.jpg" />
    <img src="img/demo/surf2.jpg" />
    <img src="img/demo/surf3.jpg" />
    <img src="img/demo/surf4.jpg" />
    <img src="img/demo/surf5.jpg" />
    <img src="img/demo/surf6.jpg" />
    <img src="img/demo/surf7.jpg" />
    <img src="img/demo/surf8.jpg" />
    <img src="img/demo/surf9.jpg" />
</div>

CSS

You only need css to personnalize the "Navigation Bar" on top. Anyway, here is a small exemple :

/* Cosmetic only */
#easyPaginate {width:300px;}
#easyPaginate img {display:block;margin-bottom:10px;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

Javascript

$('#easyPaginate').easyPaginate({
	paginateElement: 'img',
	elementsPerPage: 3,
	effect: 'climb'
});

Demos

Basic exemple

Using the same code above

Options

Yeah cause it's easy, but there is some options to make it your own

Option Type Description
paginateElement string element to paginate (default : 'li')
hashPage string hash name to directly load this "page" on the pagination. For exemple try to load this demo with #page:2 at the end of the url :) (default : 'page')
elementsPerPage integer number of elements per page (default : 10)
effect string effect to use (default : 'default')
can be : 'default', 'fade', 'slide', 'climb'
slideOffset integer offset in pixels for the animation (default : 200)
firstButton boolean false to disable first button in nav (default : true)
firstButtonText string text of the first button in nav (default : '<<')
lastButton boolean false to disable last button in nav (default : true)
lastButtonText string text of the last button in nav (default : '>>')
prevButton boolean false to disable previous button in nav (default : 'true)
prevButtonText string text for the previous button in nav (default : '<')
nextButton boolean false to disable next button in nav (default : true)
nextButtonText string text for the next button in nav (default : '>')
Fork me on GitHub