Downloaded more than 2000 times.

After using various jQuery plugins for pagination, I decided to write my own jQuery paginator plugin. While creating this plugin, I tried to overcome other plugin’s limitations and make it easy & highly customizable to meet demands of most of developers. Here are few features of this plugin,

1)      Very simple. Just 1 line of code to apply pagination on any div/container.

2)      No need for creating extra divs for pagination.

3)      4 styles of pagination.

4)      Various other options like jump to page, page info and change items per page on fly.

5)      Easy customization and styling.

6)      Nice fading effect during changing of page.

Why use it? Often you have large number of items/data in a div, which not only breaks your design but also looks ugly and lengthy. Apply this plugin on that div and you will get a nice seamless pagination on that div, which don’t break your design and visitors can easily navigate to all the items. You can style or it customize according to your requirements.   See Demo.

Implementation:

1)      Download latest jquery script and paginator.js

2)      Include both scripts in html document in head section.

<script src="js/jquery.js"></script>
<script src="js/paginator.js"></script>

3)      Initiate pagination by  writing following code in head section inside <script> tags,

<script>
$(function(){ $("#<id_of_div>").pagination(); });
</script>

// instead of <id_of_div>, type in id of the div on which you want to create pagination.

Its all you need to do. Load the page on browser and now you can see a simple, basic pagination on the page. See Demo.

Customization:

1)      Style Paginator: There are 3 classes – paginator (container for paginator), active (class for active pages) and inactive (class for current page). We can apply little css on these classes to make paginator looks pretty, either in document itself or in stylesheet. See demo

<style type="text/css">
.active
{
color:#0033CC;
border: solid 1px #0000FF;
padding:3px 5px;
margin:5px;
text-decoration:none;
}
.inactive
{
color:#000000;
cursor:default;
text-decoration:none;
border: solid 1px #0000FF;
background-color:#0099FF;
padding:3px 5px;
margin:5px;
}
</style>

2)      Paginator Style: Open paginator.js, there is a variable called paginatorStyle. This variable accepts values from 1 to 4, for displaying different styles of paginator.  More info is given in comments below that.

3)      Pagination Position: By default the position of paginator is below the div where pagination is applied. In paginator.js you can change paginatorPosition to ‘top’ if you want paginator to be on the top instead of bottom, or ‘both’ if you want it to be on both (top and bottom).

4)      Changing Symbols: Open paginator.js, there are variables like firstPageSymbol, previousPageSymbol, nextPageSymbol, lastPageSymbol. You can change these symbols, so instead of << as symbol for first page, you can write FIRST PAGE, or give img tag if you want fancy image for first page. Also, there is a variable called separator, which will appear in-between page options. Make it blank if you don’t want it.

5)      Changing Items per page and Start Page: By default there are 5 items per page and start page for pagination is first page. You can change them in paginator.js, the variables are named itemsPerPage and startPage.

6)      Enabling other options: There are 3 options available, like goto to page, change items per page, display page info. By default these are disabled, you can enable them according to your needs. You can enable them by replacing false with true as variables value, in paginator.js. More info is given in comments besides each option.

7)      Calling pagination again after changing content: If you change content, upon which pagination is applied in-between, just call initPaginator(); after changing content. It will apply pagination again on the new content with same previous settings.

8)      De-paginating Content : At any time, if you want to remove pagination from the content, just call $("#<id_of_div>").depagination(); You can call $("#<id_of_div>").pagination(); to apply pagination again on same or any other content. Kindly remember, at one time you can apply pagination on only one div or content. If you want to apply pagination on other div during program, first call depagination function on previous div and then pagination function on new div.

9)      Don’t want to open paginator.js: No worries, if you don’t want to change these variables in paginator.js, you can still change these variables in html documents just before calling the pagination function. Like See Demo.

$(function(){
itemsPerPage = 3;
paginatorStyle = 2;
paginatorPosition = 'both';
enableGoToPage = true;
$("#result").pagination();
});

That’s it. Apply it wherever you want. Play around it with, try different styles and options. Email me in case of any bug, error, confusion or you need any further assistance/customization. All kinds of feedbacks are appreciated and welcomed.

I also recently uploaded uncompressed version of the plugin for development purposes, download it. feel free to download and extend it. Also, I have uploaded this plugin on jquery plugin directory. Here is the link – http://plugins.jquery.com/project/jquery-pagination

Tested in all major Browsers

• Previous Entry: Why Facebook is following Twitter?
• Next Entry: Tutorial to build a simple Content Slider using jQuery