JavaScript pagination – jQuery pagination plugin – Pagination.js

A jQuery plugin to provide simple yet fully customizable JavaScript pagination.

Pagination.js – JavaScript pagination

A jQuery plugin to provide simple yet fully customisable pagination. Despite of infinite scroll popularity, classic pagination is still important requirement of many modern web applications. Pagination.js is a good solution, that brings us pagination solution for our front-ends.

Setup

<div id="data-container"></div>
<div id="pagination-container"></div>

Sample

$('#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);
    }
})

// A minimal rendering method:
function simpleTemplating(data) {
    var html = '<ul>';
    $.each(data, function(index, item){
        html += '<li>'+ item +'</li>';
    });
    html += '</ul>';
    return 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);
    }
})

License: MIT

Homepage

http://pagination.js.org

GitHub

https://github.com/superRaytin/paginationjs

See also

Select2 – the jQuery replacement for select boxes

pagePiling.js – create scrolling pile of sections

Vue.js scroll to element solutions

Tutorial: Mustache JS, jQuery and Express JS in action

Enjoy!