pagination
Pagination for javascript/nodejsusage example
var pagination = require('pagination');
var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());
Or customized renderer
This example show how to generate markup for twitter boostrap, see example/twitter.html for template renderingvar pagination = require('pagination')
var boostrapPaginator = new pagination.TemplatePaginator({
prelink:'/', current: 3, rowsPerPage: 200,
totalResult: 10020, slashSeparator: true,
template: function(result) {
var i, len, prelink;
var html = '<div><ul class="pagination">';
if(result.pageCount < 2) {
html += '</ul></div>';
return html;
}
prelink = this.preparePreLink(result.prelink);
if(result.previous) {
html += '<li class="page-item"><a class="page-link" href="' + prelink + result.previous + '">' + this.options.translator('PREVIOUS') + '</a></li>';
}
if(result.range.length) {
for( i = 0, len = result.range.length; i < len; i++) {
if(result.range[i] === result.current) {
html += '<li class="active page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
} else {
html += '<li class="page-item"><a class="page-link" href="' + prelink + result.range[i] + '">' + result.range[i] + '</a></li>';
}
}
}
if(result.next) {
html += '<li class="page-item"><a class="page-link" href="' + prelink + result.next + '" class="paginator-next">' + this.options.translator('NEXT') + '</a></li>';
}
html += '</ul></div>';
return html;
}
});
console.log(boostrapPaginator.render());
OR
var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 10, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.render());
// output (without newlines)
<div class="paginator">
<a href="/?page=9" class="paginator-previous">Previous</a>
<a href="/?page=8" class="paginator-page paginator-page-first">8</a>
<a href="/?page=9" class="paginator-page">9</a>
<a href="/?page=10" class="paginator-current">10</a>
<a href="/?page=11" class="paginator-page">11</a>
<a href="/?page=12" class="paginator-page paginator-page-last">12</a>
<a href="/?page=11" class="paginator-next">Next</a>
</div>
OR need data from the calculation
var pagination = require('pagination');
var paginator = new pagination.SearchPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
console.log(paginator.getPaginationData());
// output
{ prelink: '/',
current: 3,
previous: 2,
next: 4,
first: 1,
last: 51,
range: [ 1, 2, 3, 4, 5 ],
fromResult: 401,
toResult: 600,
totalResult: 10020,
pageCount: 51 }
Pagination on client side
<html>
<head>
<script src="../release/pagination.full.min.js"></script>
</head>
<body>
<div id="paging"></div>
<script type="text/javascript">
(function() {
var paginator = new pagination.ItemPaginator({prelink:'/', current: 3, rowsPerPage: 200, totalResult: 10020});
var html = paginator.render();
var paginator = pagination.create('search', {prelink:'/', current: 1, rowsPerPage: 200, totalResult: 10020});
html += paginator.render();
document.getElementById("paging").innerHTML = html;
})();
</script>
</body>
</html>
You can browse example folder for more. Release folder contains all mimified versions for browser. To customize your need you can use ./bin/build.js -hhtml += paginator.render();
Classes
SearchPaginator(options)
options
See Options bellow
See also http://developer.yahoo.com/ypatterns/navigation/pagination/search.html
ItemPaginator(options)
options
See Options bellow
See also http://developer.yahoo.com/ypatterns/navigation/pagination/item.html
TemplatePaginator(options)
options
See Options bellow
This class will render the markup as desired. The options must contains property "template" It can be either a template string or a compiled template. The local variables available in the template are
prelink
StringpreparedPreLink
Stringcurrent
Integerprevious
Integernext
Integerfirst
Integerlast
Integerrange
ArrayfromResult
IntegertoResult
IntegertotalResult
IntegerpageCount
Integertranslations
Object with properties NEXT, PREVIOUS, FIRST, LAST, CURRENTPAGEREPORT
API
Paginator.getPaginationData()
Return an object contains data for rendering markup. See example above.Paginator.set(option, value)
Set value to a single for option. See options section bellowPaginator.preparePreLink(prelink)
prelink
String
Append page param to the link
Paginator.render()
Return the rendered markuppagination.create(type, options)
type
Stringoptions
Object see Options section bellow
Wrapper for create instance of classes above
pagination.TemplateEngine.parse(str, options)
See pagination.TemplateEngine.compile bellowpagination.TemplateEngine.compile(str, options)
str
Template stringoptions
object which can contains .open .close .cache and .id
Options
Object to pass to paginator classes (second argument when using create function)totalResult: {Integer}
Number of total items in result setprelink: {String}
Link to append the page-paramrowsPerPage: {Integer}
Number of items per page, default to 10pageLinks: {Integer}
Number of links to create in page range, default to 5. This value will be ignored when using item pagination.current: {Integer}
Indicate which page is the current one. Page always starts with 1.translationCache: {Boolean}
To indicate if the result from CURRENTPAGEREPORT translation can be cached or not. Default is false. The cache is global and will be the same for all instances which have specified translationCacheKey as bellow.translationCacheKey: {String}
For supporting multiple versions of translation of CURRENTPAGEREPORT. It can use for multilanguages or different formats. Default is "en"translator: {Function}
For translations of FIRST, NEXT, ... Simple examplevar translations = {
'PREVIOUS' : 'Voorgaand',
'NEXT' : 'Volgende',
'FIRST' : 'Eerst',
'LAST' : 'Laatste',
'CURRENT_PAGE_REPORT' : 'Resulten {FromResult} - {ToResult} van {TotalResult}'
};
var item = new ItemPaginator({
prelink : '/',
pageLinks : 5,
current : 5,
totalResult : 100,
translator : function(str) {
return translations[str];
}
});