How to Create Paging Links in jQuery within Seconds?

Sometimes you find the need to create paging links in jQuery code. Let me tell you this is easy and just a few seconds work.

DEMO & DOWNLOAD

Check the below image which illustrates the paging links I am creating:

jQuery Paging Links

Follow the Steps to Create Paging Links

1. Download the jQuery Pagination Plugin from GitHub, open the downloaded zip file and get the jquery.twbsPagination.js file from it.
2. Add the jquery.twbsPagination.js file’s reference in your page:

<script src="JS/jquery.twbsPagination.js"></script>

3. Create the pagination ul element in your page:

<ul id="pagination"></ul>

4. Create a paging function named Paging in jQuery and call this function whenever you need to create paging links:

function Paging(totalPage) {
    var obj = $("#pagination").twbsPagination({
        totalPages: totalPage,
        visiblePages: 5,
        onPageClick: function (event, page) {
            //code when user clicks any of the page;
        }
    });
}

Explanation

This paging function calls .twbsPagination() method of the jQuery Pagination plugin and creates the paging links in the pagination ul element.

I have also written an article on jQuery Infinite Scroll which is the modern way to create Auto Paging in your website.

The property totalPages should be provided with the total number of pages to create. I provided the value for totalPages from the function’s parameter.

Also note that onPageClick is the callback function which is called when a user clicks on any page link. You can use it to bind the page contents for the clicked page link.

DEMO & DOWNLOAD

Happy coding!