Monday, February 3, 2014

Simple Pagination Using jQuery & jPages Plugin

In this Tutorial I will explain how to implement simple Client Side Pagination using jQuery
There are so many jQuery plugins available for pagination  but recently I came across one beautiful plug in called ‘jPages ‘ with rich set of features like such as
  • Auto page turn
  • Key and scroll browse
  • Showing items with delay
  • Completely customizable navigation panel etc…
Let’s go through a simple pagination example using ‘jPages‘ plugin.

Just We need to create one list of elements in which we will display our Items. and one div for showing page numbers. and then we have to add ‘jQuery’ and ‘jPages’ plugins to enable pagination.

Simple jQuery Pagination
Simple jQuery Pagination
As I told before jQuery jPages Pagination Plugin  comes with rich set of options,In “containerId” we have to pass Id of our List of elements and ‘perPage’ represents how many elements we should show in particular page. and that’s it nothing more than that.
If we set ‘keyBrowse’ parameter to true we can use left and right arrows to browse through pages. and to enable mouse scroll browse just set ‘scrollBrowse’  parameter to true.
And if we want to jump to particular page,add one text box and button to HTML and in jQuery add following code.

jQuery Pagination Jump To Page
jQuery Pagination Jump To Page
If we want to change the number of elements to show dynamically you can add one select box and then in jQuery add following code

‘jPages’ pagination plugin provides an option called ‘destroy’ to remove pagination from the container. So first we will remove the pagination using “destroy” parameter and then we will add pagination using new ‘perPage’ value which comes from select box.
jQuery Pagination Items Per Page
jQuery Pagination Items Per Page
And we can customize buttons as per our needs, by default it will show ‘previous’ and ‘next’ buttons with page numbers in pagination div.

And If you don’t want to show page numbers or simply you can show blank links by setting all above parameters to false and add one parameter called ‘links’ with blank value.

‘jPages’ pagination plugin integrated with Animate.css an amazing CSS3 Animation library by  Dan Eden . To use these animations just add Animate.css into your HTML file.
And then Add Animation property as shown below.

And Animate.css contains rich set of animations, to use all those animations we will add select options in our HTML and on change we will call different animations as shown below.

jQuery Pagination CSS3 Animation
jQuery Pagination CSS3 Animation
One more most important feature of jpages pagination plugin is call backing mechanism. For example you want to show page numbers information like ’2 of 10 pages’ or Elements information like ’1-10 of 120 Items’ we can use callback parameter in jpages plugin.

jQueryPaginationCallbackMechanism
jQuery Pagination Callback Mechanism
There are so many things to explore in this jQuery jPages Pagination plug in I covered almost all important features.Visit jPages home page for more feature
Download source code for this demo by sharing this article.

No comments:

Post a Comment