表格分页，使用把手{{#each}}

Question

是否可以使用把手{{#each}}来创建和导航分页？相反，所有数据行显示在同一页面上，我想只显示一个。

可以使用的东西：

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

Answer 1

这是使用jquery twbsPagination和车把的解决方案。我添加了仅仅是元素表示的bootstrap。如果您在运行代码段时没有看到分页，请不要忘记向下滚动。

＆＃13;

＆＃13;

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



});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;