Pagination.js

> A jQuery plugin to provide simple yet fully customisable pagination.

[![NPM version][npm-image]][npm-url]
[![Bower version][bower-image]][bower-url]

[npm-url]: https://npmjs.org/package/paginationjs
[npm-image]: http://img.shields.io/npm/v/paginationjs.svg
[bower-url]:http://badge.fury.io/bo/paginationjs
[bower-image]: https://badge.fury.io/bo/paginationjs.svg

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

``html


`

`js
$('#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:

`js
function simpleTemplating(data) {
var html = '

';
$.each(data, function(index, item){
html += '
• '+ item +'
';
});
html += '

';
return html;
}
`

Call:

`js
$('#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.

$3

`html

`

`js
$('#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);
}
})
`

$3

`html

`

`js
$('#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