Popularity
3.9
Stable
Activity
0.0
Stable
773
33
613

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: JavaScript     Js     Pagination    
Latest version: v2.1.5

Pagination.js alternatives and similar libraries

Based on the "Pagination" category.
Alternatively, view Pagination.js alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of Pagination.js or a related project?

Add another 'Pagination' Library

README

Pagination.js

A jQuery plugin to provide simple yet fully customisable pagination.

NPM version Bower version CDNJS

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](dist/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


*Note that all licence references and agreements mentioned in the Pagination.js README section above are relevant to that project's source code only.