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.
-
JavaScript Paginator
Simple yet flexible pagination in JavaScript
Do you think we are missing an alternative of Pagination.js or a related project?
|
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
sponsored
surveyjs.io
|
Popular Comparisons
-
Pagination.jsvsJavaScript Paginator
-
JavaScript PaginatorvsPagination.js
-
JavaScript Paginatorvsglamorous
|
InfluxDB - Power Real-Time Data Analytics at Scale
sponsored
www.influxdata.com
|
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.