表格分页，使用把手 #each

Posted 2023-03-07

【中文标题】表格分页，使用把手 #each

【英文标题】：Table pagination, using handlebars #each表格分页，使用把手 #each

【发布时间】：2018-07-15 02:22:24

【问题描述】：

是否可以使用把手#each 来创建和导航分页？我希望一次只显示一个，而不是将所有数据行显示在同一页面上。

可以使用的东西：

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

【问题讨论】：

只是提示，你也可以使用DataTables。它是一个用于处理 html 表格的强大插件。链接：datatables.net

【参考方案1】：

这是一个使用 jquery twbsPagination 和车把的解决方案。我只添加了元素呈现的引导程序。如果您在运行 sn -p 时没有看到分页，请不要忘记向下滚动。

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