Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 137 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
dist		dist
docs		docs
examples		examples
src		src
.gitignore		.gitignore
.npmignore		.npmignore
.npmrc		.npmrc
Gruntfile.js		Gruntfile.js
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
component.json		component.json
package.json		package.json

Repository files navigation

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 orbower install paginationjs or just downloadpagination.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 asHandlebars andUndercore.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);}})