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.

//Used to display Page Numbers
<div class="holder"> </div>

<ul id="itemContainer">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
</ul>

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.

$(document).ready(function () {

$("div.holder").jPages({
containerID: "itemContainer",
perPage: 5,
keyBrowse: true,
scrollBrowse: true
});
});

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.

$("button").click(function () {
                /* get given page */
                var page = parseInt($("input").val());
                /* jump to that page */
                $("div.holder").jPages(page);
});

<input type="text" value="5" />
<button>jump to this page</button>

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

        <label>
            items per page:
        </label>
        <select id="Itemsperpage">
            <option>5</option>
            <option selected="selected">10</option>
            <option>15</option>
        </select>

$("select#Itemsperpage").change(function () {
                /* get new no of items per page */
                var newPerPage = parseInt($(this).val());
                /* destroy jPages and initiate plugin again */
                $("div.holder").jPages("destroy").jPages({
                    containerID: "itemContainer",
                    perPage: newPerPage
});
});

‘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.

And we can customize buttons as per our needs, by default it will show ‘previous’ and ‘next’ buttons with page numbers in pagination div.

 $("div.holder").jPages({
        containerID : "itemContainer",
        first       : "Intial",
        previous    : "previous",
        next        : "next",
        last        : "last"
 });

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.

//setting midRange to 15 to prevent the breaks "..."
   $("div.holder").jPages({
        containerID : "itemContainer",
        first       : false,
        previous    : false,
        next        : false,
        last        : false,
        midRange    : 15,
        links       : "blank"
    });
});

‘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.

$("div.holder").jPages({
        containerID : "itemContainer",
        animation   : "bounceInUp"
});

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.

$("select#Animation").change(function () {
                            /* get new css animation */
                            var newAnimation = $(this).val();
                            /* destroy jPages and initiate plugin again */
                            $("div.holder").jPages("destroy").jPages({
                                containerID: "itemContainer",
                                animation: newAnimation
                            });
                        });

<select id="Animation">
            <option>fadeIn</option>
            <option>fadeInUp</option>
            <option>fadeInDown</option>
            <option>fadeInLeft</option>
            <option>fadeInRight</option>
</select>

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.

$("div.holder").jPages({
                containerID: "itemContainer",
                perPage: 3,
                callback: function (pages,
        items) {
                    $("#legend1").html("Page " + pages.current + " of " + pages.count);
                    $("#legend2").html(items.range.start + " - " + items.range.end + " of " + items.count);
                }
            });

<p id="legend1"></p>
<p id="legend2"></p>

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.