jQuery Pagination plugin

Optimized for bootstrap

View project on GitHub

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

Page 1

    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>

    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 false)
    • 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')
    • loop carousel-style pagination (default: false)
    • 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)

      Synchronized pagination elements

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

        Page 1

          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.