Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Jun 23, 2018
Jan 1, 2015
Jan 1, 2015
Nov 13, 2019
Nov 13, 2019
Nov 13, 2019

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

About

A jQuery plugin to provide simple yet fully customisable pagination.

Topics

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •