表格分页，使用把手{{#each}}
表格分页，使用把手{{#each}}
提问于 2018-02-05 17:10:11
是否可以使用handlebars {{#each}}来创建和导航分页？我想一次只显示一个数据行，而不是在同一页上显示所有数据行。
要用到的东西：
{{#each books}}
{{!--indexing/pagination for each book--}}
<h1>{{title}}</h1>
<br>
<h4>{{details}}</h4>
{{#each chapters}}
<h4>{{Something}}</h4>
{{/each}} {{/each}}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-05 23:37:41
这是一个使用jquery twbsPagination和handlebar的解决方案。我已经添加了元素表示的引导。如果在运行代码片段时没有看到分页，不要忘了向下滚动。
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48619007
复制相关文章
相似问题
腾讯云开发者
