Pagination can be quite tricky with Handlebars since Handlebars does not have any built in way to do for/while loops. One solution mix some presentation code within your logic layer and passing an array containing all your pages in an array.
1 2 3 4 5 6 7 8 9 10
This solution has several drawbacks: mixing of logic/view code, code duplication, difficult to reuse, etc.
The other, cleaner solution, is to write a Handlebars helper, which I have already done so you don’t have to!
The helper is available for download or forking on Github:
or through NPM:
To use it, all you have to do is register it as an helper:
And all you need to pass to your template is an object containing a
page parameter which is the number of the current page and a
pageCount parameter which is the total number of pages.
1 2 3 4 5 6
Handlebars-paginate let’s you define three types of blocks in your template:
This will iterate over all the possible pages. An optional
parameter is available if you’d like to limit how many page links to
limit=7 will only display 3 links to the left of the active
page and 3 pages to its right.
1 2 3
previous and next:
Finally, previous and next are used to define how you want to display the “previous” and “next” buttons.
1 2 3
1 2 3
Enjoy and feel free to fork or report issues!