jQuery Pagination plugin

Intro

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.

Click to download:

Download .zip file Download .tar.gz file

Demo

Here is corresponding piece of code:

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

And HTML code:

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

Options and events

Options explanation and default values:
• totalPages the number of pages (required, checked)
• startPage the current page that show on start(default: 1)
• visiblePages maximum visible pages (default: 5)
• href template for pagination links (default javascript:void(0);)
• hrefVariable variable name in href template for page number (default {{number}})
• first text label (default: 'First')
• prev text label (default: 'Previous')
• next text label (default: 'Next')
• last text label (default: 'Last')
• paginationClass the root style for pagination component (default: 'pagination'). You can use this option to apply your own style

Available event:
• onPageClick callback function
  Function parameters
  • event object
  • page the number of page

Examples

URL page link

You can specify url using href option:

    $(selector).twbsPagination({
        totalPages: 35,
        visiblePages: 8,
        href: '?page={{number}}'
    });

Visible pages option

The max number of visible pages specifies via visiblePages option. The following example shows the 10 visible pages:

    $(selector).twbsPagination({
        totalPages: 35,
        visiblePages: 10,
    });

Note: this is normal size (without pagination-sm)