Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Handlebars pagination helper.
Handlebars.registerHelper('pagination', function(currentPage, totalPage, size, options) {
var startPage, endPage, context;
if (arguments.length === 3) {
options = size;
size = 5;
}
startPage = currentPage - Math.floor(size / 2);
endPage = currentPage + Math.floor(size / 2);
if (startPage <= 0) {
endPage -= (startPage - 1);
startPage = 1;
}
if (endPage > totalPage) {
endPage = totalPage;
if (endPage - size + 1 > 0) {
startPage = endPage - size + 1;
} else {
startPage = 1;
}
}
context = {
startFromFirstPage: false,
pages: [],
endAtLastPage: false,
};
if (startPage === 1) {
context.startFromFirstPage = true;
}
for (var i = startPage; i <= endPage; i++) {
context.pages.push({
page: i,
isCurrent: i === currentPage,
});
}
if (endPage === totalPage) {
context.endAtLastPage = true;
}
return options.fn(context);
});
// currentPage = 1, pageCount = 25, size = 5
[1] 2 3 4 5 >
// currentPage = 16, pageCount = 25, size = 5
< 14 15 [16] 17 18 >
{{#pagination currentPage pageCount size}}
<div class="pagination">
{{#unless startFromFirstPage}}
<a href="#">&lt;</a>
{{/unless}}
{{#each pages}}
{{#if isCurrent}}
[<a href="#">{{page}}</a>]
{{/if}}
{{#unless isCurrent}}
<a href="#">{{page}}</a>
{{/unless}}
{{/each}}
{{#unless endAtLastPage}}
<a href="#">&gt;</a>
{{/unless}}
</div>
{{/pagination}}
@i-arindam

This comment has been minimized.

Copy link

@i-arindam i-arindam commented Dec 6, 2014

nice work by using context.endAtLastPage instead of defining multiple helper functions.

@tarponjargon

This comment has been minimized.

Copy link

@tarponjargon tarponjargon commented Dec 26, 2016

Can you explain the "options" argument and the logic behind it?

@tarponjargon

This comment has been minimized.

Copy link

@tarponjargon tarponjargon commented Dec 26, 2016

hah - nevermind...I see it's a handlebars thing. anyway thanks, this was helpful

@medyagh

This comment has been minimized.

Copy link

@medyagh medyagh commented Jan 8, 2017

Hi @trantorLiu thank you so much for posting the handlebar helper,

I am trying to use your pagination helper for handlebar. do you know where I should put my data?

here is my handlebar.js

    {{#each products}}
                  {{#if (has_price_range Price)}}
                  Price Range: {{MinPrice}} - {{MaxPrice}}
                  <br/> 
                 {{else}}
                 Price:  {{Price}}
                 {{/if}}                  
    {{/each}}

could you tell me where I put this code inside pagination ?

{{#pagination currentPage pageCount size}}
{{/pagination}

@ClaytonSibanda

This comment has been minimized.

Copy link

@ClaytonSibanda ClaytonSibanda commented Feb 9, 2018

Should also convert totalPage and endPage to numbers when comparing them to prevent white space effects

@joana97

This comment has been minimized.

Copy link

@joana97 joana97 commented Aug 27, 2021

Hi, how can implement this with multiple tabs? thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment