Handlebars pagination helper.

handlebars-pagination-helper.js

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);
});

output.txt

// currentPage = 1, pageCount = 25, size = 5
[1] 2 3 4 5 >

// currentPage = 16, pageCount = 25, size = 5
< 14 15 [16] 17 18 >

usage.html

{{#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}}

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

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

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

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}

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

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