Last active
January 12, 2016 00:49
-
-
Save robmint/4651cf1c6f336e663dba to your computer and use it in GitHub Desktop.
standard pagination pattern for node
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
extend = require(extend); | |
/* Creates an array of items representing the pagination navigation. | |
You can then pass this to your template engine eg handlebars | |
Also see the PHP version: | |
https://gist.github.com/robmint/e4b037aba1687195524c | |
Based on the work of Jason Coleman | |
http://www.strangerstudios.com/blog/2006/07/paginate-your-site-like-digg/ | |
*/ | |
var Pagination = function (c) { | |
config = { | |
totalitems: 0, | |
page: 1, | |
adjacents: 1, | |
limit: 15, | |
page: 1, | |
targetpage: "/", | |
pagestring: "p=" | |
} | |
this.config = extend(config, c); | |
for (var key in this.config) { | |
this[key] = this.config[key]; | |
console.log(key); | |
} | |
console.dir(this.config); | |
//other vars | |
prev = page - 1; //previous page is page - 1 | |
next = page + 1; //next page is page + 1 | |
lastpage = Math.ceil(totalitems / limit); //lastpage is = total items / items per page, rounded up. | |
lpm1 = lastpage - 1; //last page minus 1 | |
pages = []; | |
if(lastpage > 1) | |
{ | |
//previous button | |
if (page > 1) | |
pages.push({previous: true, url: targetpage + pagestring + prev}); | |
//pages | |
if (lastpage < 7 + (adjacents * 2)) //not enough pages to bother breaking it up | |
{ | |
for (counter = 1; counter <= lastpage; counter++) | |
{ | |
if (counter == page) | |
pages.push({selected: true, label: counter}); | |
else | |
pages.push({label: counter, url: targetpage + pagestring + counter}); | |
} | |
} | |
else if(lastpage >= 7 + (adjacents * 2)) //enough pages to hide some | |
{ | |
//close to beginning; only hide later pages | |
if(page < 1 + (adjacents * 3)) | |
{ | |
for (counter = 1; counter < 4 + (adjacents * 2); counter++) | |
{ | |
if (counter == page) | |
pages.push({selected: true, label: counter}); | |
else | |
pages.push({label: counter, url: targetpage + pagestring + counter}); | |
} | |
pages.push({ellipsis: true}); | |
pages.push({label: lpm1, url: targetpage + pagestring + lpm1}); | |
pages.push({label: lastpage, url: targetpage + pagestring + lastpage}); | |
} | |
//in middle; hide some front and some back | |
else if(lastpage - (adjacents * 2) > page && page > (adjacents * 2)) | |
{ | |
pages.push({label: '1', url: targetpage + pagestring + "1"}); | |
pages.push({label: '2', url: targetpage + pagestring + "2"}); | |
pages.push({ellipsis: true}); | |
for (counter = page - adjacents; counter <= page + adjacents; counter++) | |
{ | |
if (counter == page) | |
pages.push({selected: true, label: counter}); | |
else | |
pages.push({label: counter, url: targetpage + pagestring + counter}); | |
} | |
pages.push({ellipsis: true}); | |
pages.push({label: lpm1, url: targetpage + pagestring + lpm1}); | |
pages.push({label: lastpage, url: targetpage + pagestring + lastpage}); | |
} | |
//close to end; only hide early pages | |
else | |
{ | |
pages.push({label: '1', url: targetpage + pagestring + "1"}); | |
pages.push({label: '2', url: targetpage + pagestring + "2"}); | |
pages.push({ellipsis: true}); | |
for (counter = lastpage - (1 + (adjacents * 3)); counter <= lastpage; counter++) | |
{ | |
if (counter == page) | |
pages.push({selected: true, label: counter}); | |
else | |
pages.push({label: counter, url: targetpage + pagestring + counter}); | |
} | |
} | |
} | |
//next button | |
if (page < counter - 1) | |
pages.push({next: true, url: targetpage + pagestring + next}); | |
} | |
this.pages = pages; | |
} | |
module.exports = Pagination; | |
/* Typical Handlebars template | |
{{#each pages}} | |
{{#if previous}} | |
<li class="first"><a href="{{url}}" title="Previous"><span | |
class="glyphicons glyphicons-circle-arrow-left"></span></a></li> | |
{{else}} | |
{{#if selected}} | |
<li class="active"><a href="{{url}}">{{label}}</a></li> | |
{{else}} | |
{{#if ellipsis}} | |
<li><a class="disabled glyph-sm"><span | |
class="glyphicons glyphicons-more"></span></a></li> | |
{{else}} | |
{{#if next}} | |
<li class="last"><a href="{{url}}" title="Next"><span | |
class="glyphicons glyphicons-circle-arrow-right"></span></a></li> | |
{{else}} | |
<li><a href="{{url}}">{{label}}</a></li> | |
{{/if}} | |
{{/if}} | |
{{/if}} | |
{{/if}} | |
{{/each}} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment