Skip to content

Instantly share code, notes, and snippets.

@trantorLiu
Last active August 10, 2023 14:01
Show Gist options
  • Save trantorLiu/5924389 to your computer and use it in GitHub Desktop.
Save trantorLiu/5924389 to your computer and use it in GitHub Desktop.
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
Copy link

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

@tarponjargon
Copy link

tarponjargon commented Dec 26, 2016

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

@tarponjargon
Copy link

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

@medyagh
Copy link

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
Copy link

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

@joana97
Copy link

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