Skip to content
A jQuery plugin to provide simple yet fully customisable pagination.
JavaScript CSS
Branch: master
Clone or download
Latest commit ffb9f8b Sep 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist bump 2.1.4 Sep 17, 2018
docs docs: update Jun 23, 2018
examples chore: update examples & docs & dist files Nov 1, 2017
src bump 2.1.4 Sep 17, 2018
.gitignore Initial Jan 1, 2015
.npmignore chore: add .npmignore Jan 21, 2018
Gruntfile.js format code style Aug 18, 2016
LICENSE Initial Jan 1, 2015
README.md chore: update README Nov 1, 2017
bower.json bump 2.1.4 Sep 17, 2018
component.json bump 2.1.4 Sep 17, 2018
package.json bump 2.1.4 Sep 17, 2018

README.md

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

You can’t perform that action at this time.