Jquery Plugin For Pagination

One of the main tasks when developing websites based on Jquery and AJAX is pagination of content pages. This task can often be very challenging, especially when working with large data volumes. Therefore, in order to help you create a high-quality pagination interface, I would like to introduce my favorite jQuery plugin for pagination – jPagination.

I love talking about JQuery plugins. In this tutorial, I’d like to introduce you to one of the best Pagination plugins for JQuery.

Have you ever wanted to add pagination to your website? After all, who doesn’t love looking at more content than what is on the main page. In this tutorial, I’ll show you how to create your own simple pagination plugin for jQuery which will work in any browser. This tutorial will go over something called AJAX. If that part doesn’t make sense to you, no worries because I’ll walk you through it 🙂

Jquery Plugin For Pagination

 Demo

This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: .pagination (you change this one), .active and .disabled. Check out the demo.

Page 1

First
Previous
1
2
3
4
5
6
7
Next
Last

Here is corresponding piece of code:

    $('#pagination-demo').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });

And HTML code:

    <ul id="pagination-demo" class="pagination-sm"></ul>

Download master:

Download.zip file Download.tar.gz file

 Options explanation

Option nameDescriptionTypeDefault value
totalPagesThe number of pagesNumber1
startPageThe current page that show on startNumber1
visiblePagesMax visible pagesNumber5
initiateStartPageClickFire click at start page when plugin initializedBooltrue
hideOnlyOnePageThis hides all control buttons if it has one pageBoolfalse
hrefGenerate query string or generate #Boolfalse
pageVariableTemplate that will be replaced with page numberString'{{page}}'
totalPagesVariableWill be replaced with total pages numberString'{{total_pages}}'
pageIt can be used to customize page number labelStringnull
firstText label for the ‘First’ buttonString'First'
prevLabel for the ‘Previous’ buttonString'Previous'
nextLabel for the ‘Next’ buttonString'Next'
lastLabel for the ‘Last’ buttonString'Last'
loopCarousel-style paginationBoolfalse
onPageClickCallback on click eventFunctionnull
paginationClassThe root style for pagination componentString'pagination'
nextClassCSS class(es) for the ‘Next’ buttonString'page-item next'
prevClassClass(es) for the ‘Previous’ buttonString'page-item prev'
lastClassClass(es) for the ‘Last’ buttonString'page-item last'
firstClassClass(es) for the ‘First’ buttonString'page-item first'
pageClassClass(es) for the page buttonsString'page-item'
activeClassClass(es) for active buttonString'active'
disabledClassClass(es) for the disabled button(s)String'disabled'
anchorClassCSS class(es) for anchors inside buttonsString'page-link'

 Examples

Dynamic total pages number

This is from frequently asked questions. For e.g. – How can I set new number of total pages? How can I initialize plugin with new set of options? How to refresh or redraw it?

You can do it with two simple steps. Call destroy method and then initialize it with new options.

    var $pagination = $('selector');
    var defaultOpts = {
        totalPages: 20
    };
    $pagination.twbsPagination(defaultOpts);
    $.ajax({
        ...,
        success: function (data) {
            var totalPages = data.newTotalPages;
            var currentPage = $pagination.twbsPagination('getCurrentPage');
            $pagination.twbsPagination('destroy');
            $pagination.twbsPagination($.extend({}, defaultOpts, {
                startPage: currentPage,
                totalPages: totalPages
            }));
        }
    });

Page 1

First
Previous
1
2
3
4
5
Next
Last

Here you can change the total pages: Change

Synchronized pagination elements

You can attach multiple paginators to your content and access them via class name. The following example show this case.

HTML code:

    <ul class="sync-pagination"></ul>
    <div id="content">Page 1</div>
    <ul class="sync-pagination pagination-sm"></ul>

JS code:

    $('.sync-pagination').twbsPagination({
        totalPages: 20,
        onPageClick: function (evt, page) {
            $('#content').text('Page ' + page);
        }
    });

First
Previous
1
2
3
4
5
Next
Last

Page 1

First
Previous
1
2
3
4
5
Next
Last

Bootstrap 4 example (in iframe)

It shows how it look like with bootstrap 4 (version 4.0.0-alpha.4).https://josecebe.github.io/twbs-pagination/bootstrap-v4.html

Alternative style pagination (with start and end page numbers)

For that purpose (see example view) I suggest flaviusmatis/simplePagination.js plugin.

JS code:

    $('selector').pagination({
        items: 20,
        itemOnPage: 8,
        currentPage: 1,
        cssStyle: '',
        prevText: '<span aria-hidden="true">&laquo;</span>',
        nextText: '<span aria-hidden="true">&raquo;</span>',
        onInit: function () {
            // fire first page loading
        },
        onPageClick: function (page, evt) {
            // some code
        }
    });

Page 1

«
1
2
3
4
5

19
20
»

Methods ‘enable’ and ‘disable’ in action

Page 1

First
Previous
1
2
3
4
5
Next
Last

Push the buttons…EnableDisable

JS code:

    // ### IF YOU DON'T PASS onPageClick FUNCTION IN OPTIONS OBJECT
    // ### YOU SHOULD FIRE FIRST PAGE CLICK INDEPENDENTLY
    // ### BECAUSE PLUGIN DOESN'T HAVE ANY CALLBACK
    // ### TO FIRE IT DURING INITIALIZATION
    var $edPag = $('#enable-disable-pagination').twbsPagination({
        totalPages: 20
    }).on('page', function (evt, page) {
        $('#enable-disable-pagination-content').text('Page ' + page);
    });

    $('#enable-pagination').click(function () {
        $edPag.twbsPagination('enable');
    });

    $('#disable-pagination').click(function () {
        $edPag.twbsPagination('disable');
    });

 License

Copyright 2014 Eugene Simakin

Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Leave a Comment