Table pagination, using handlebars {{#each}}

Question

Is it possible to use handlebars {{#each}} to create and navigate through pagination? Instead having all data-row displaying on the same page, I would like to only display one at the time.

Something to work with:

  {{#each books}}
    {{!--indexing/pagination for each book--}}
    <h1>{{title}}</h1>
    <br>
    <h4>{{details}}</h4>
    {{#each chapters}}
    <h4>{{Something}}</h4>
  {{/each}} {{/each}}

Answer 1

Here is a solution using jquery twbsPagination and handlebar. I have added bootstrap just of the presentation of elements. If you don't see pagination when running the snippet don't forget to scroll down.

$(document).ready(function () {
 var context = {
    "books": [{
    	"title":"Book 1",
      "details": "Book1 details",
      "chapters": ["Content from chapter 1 (book1)", "Content from chapter 2 (book1)", "Content from chapter 3 (book1)"]
    },
    {
    	"title":"Book 2",
      "details":"Book2 details",
      "chapters": ["Content from chapter 1 (book2)", "Content from chapter 2 (book2)", "Content from chapter 3 (book2)"]
    },
    {
    	"title":"Book 3",
      "details":"Book3 details",
      "chapters": ["Content from chapter 1 (book3)", "Content from chapter 2 (book3)", "Content from chapter 3 (book3)"]
    }]

};


	var source   = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html    = template(context);
  $("#resultPlaceholder").html(html);
   $('#pagination-demo').twbsPagination({
        totalPages: $('#booksInDOM .bookItem').length,
        visiblePages: 7,
        onPageClick: function (event, page) {
            $('#bookdetails').html($('#book' + (page-1)).html());
        }
    });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/css/tether.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
<div class="container">

<div style="display: none;" id="booksInDOM">
{{#each books}}
			<div id="book{{@index}}" class="bookItem">
      	<div class="card">
          <div class="card-header">{{title}}</div>
          <div class="card-block">
          {{details}}<br/>
          {{#each chapters}}
          {{this}}<br/>
          {{/each}} 
          </div>
        </div>
			</div>
{{/each}}
</div>

<div id="bookdetails"></div>
<br/>
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
</script>
<br/>
<div id="resultPlaceholder">
</div>