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?
README
Pagination.js
A jQuery plugin to provide simple yet fully customisable pagination.
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.