Wondering what’s next for npm?Check out our public roadmap! »

    paginationjs

    2.1.5 • Public • Published

    Pagination.js

    A jQuery plugin to provide simple yet fully customisable pagination.

    NPM version Bower version CDNJS

    paginationjs

    See demos and full documentation at official site: http://pagination.js.org

    Installation / Download

    npm install paginationjs or bower install paginationjs or just download pagination.js from the git repo.

    Quick Start

    <div id="data-container"></div>
    <div id="pagination-container"></div>
    $('#pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
        callback: function(data, pagination) {
            // template method of yourself
            var html = template(data);
            $('#data-container').html(html);
        }
    })

    Rendering data

    Below is a minimal rendering method:

    function simpleTemplating(data) {
        var html = '<ul>';
        $.each(data, function(index, item){
            html += '<li>'+ item +'</li>';
        });
        html += '</ul>';
        return html;
    }

    Call:

    $('#pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
        callback: function(data, pagination) {
            var html = simpleTemplating(data);
            $('#data-container').html(html);
        }
    })

    To make it easier to maintain, you'd better use specialized templating engine to do that. Such as Handlebars and Undercore.template.

    Handlebars

    <script type="text/template" id="template-demo">
        <ul>
        {{#each data}}
            <li>{{this}}</li>
        {{/each}}
        </ul>
    </script> 
    $('#pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
        callback: function(data, pagination) {
            var html = Handlebars.compile($('#template-demo').html(), {
                data: data
            });
            $('#data-container').html(html);
        }
    })

    Underscore

    <script type="text/template" id="template-demo">
        <ul>
        <% for (var i = 0, len = data.length; i < len; i++) { %>
            <li><%= data[i] %></li>
        <% } %>
        </ul>
    </script> 
    $('#pagination-container').pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
        callback: function(data, pagination) {
            var html = _.template($('#template-demo').html(), {
                data: data
            });
            $('#data-container').html(html);
        }
    })

    Or any other templating engine you prefer.

    License

    Released under the MIT license.

    MIT: http://rem.mit-license.org, See LICENSE

    Install

    npm i paginationjs

    DownloadsWeekly Downloads

    1,501

    Version

    2.1.5

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar