A jQuery plugin to provide simple yet fully customisable pagination.
See demos and full documentation at official site: http://pagination.js.org
npm install paginationjs or bower install paginationjs or just download pagination.js from the git repo.
<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);
}
})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 to use specialized templating engine to do that. Such as Handlebars and Undercore.template.
<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);
}
})<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.
Released under the MIT license.
MIT: http://rem.mit-license.org, See LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent