Simple jQuery Pagination
301 Flares 301 Flares ×

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

Here is the Final Demo Pagination Using jQuery and  jPages plugin.

Download source code

Download

I hope you have enjoyed this article.If so share this post with your friends and also join our mailing list.

Wait before leaving. why can’t you follow me on twitter or GooglePlus be a friend on Facebook to get in touch me.

And Finally Don’t forget to Join my Mailing List

Author : Arunkumar Gudelli

I am a Simple Guy, Standing Infront of the World, asking you to Follow Me.
Don't miss any posts from Me,Subscribe to the RSS Feed.
You can connect me via @twitter or @facebook or Google+ or e-mail.

Loading Facebook Comments ...

Leave a Reply

301 Flares Twitter 15 Facebook 24 Google+ 256 LinkedIn 5 StumbleUpon 1 Reddit 0 301 Flares ×