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 from the git repo.

Quick Start

<divid="data-container"></div><divid="pagination-container"></div>

$('#pagination-container').pagination({dataSource: [1,2,3,4,5,6,7, ... ,195],callback: function(data,pagination){// template method of yourselfvarhtml=template(data);$('#data-container').html(html);}})

Rendering data

Below is a minimal rendering method:

functionsimpleTemplating(data){varhtml='<ul>';$.each(data,function(index,item){html+='<li>'+item+'</li>';});html+='</ul>';returnhtml;}

Call:

$('#pagination-container').pagination({dataSource: [1,2,3,4,5,6,7, ... ,195],callback: function(data,pagination){varhtml=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.

Handlebars

<scripttype="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){varhtml=Handlebars.compile($('#template-demo').html(),{data: data});$('#data-container').html(html);}})

Underscore

<scripttype="text/template" id="template-demo"><ul><%for(vari=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){varhtml=_.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