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

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