html - Foundation 6 分页，如何对表格进行分页？

Question

我是 Foundation 6 的新手，但我需要使用分页插件对 Foundation 6 表格进行分页。如何对表格进行分页？如何将表格与分页器连接？这里是来自 http://foundation.zurb.com/sites/docs/pagination.html 的常规代码

<div class="row">
  <div class="columns">
    <ul class="pagination" role="navigation" aria-label="Pagination">
      <li class="disabled">Previous <span class="show-for-sr">page</span></li>
      <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
      <li><a href="#0" aria-label="Page 2">2</a></li>
      <li><a href="#0" aria-label="Page 3">3</a></li>
      <li><a href="#0" aria-label="Page 4">4</a></li>
      <li class="ellipsis" aria-hidden="true"></li>
      <li><a href="#0" aria-label="Page 12">12</a></li>
      <li><a href="#0" aria-label="Page 13">13</a></li>
      <li><a href="#0" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
    </ul>
  </div>
</div>

这是我的 table :

<table id="table">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

里面的内容<tbody></tbody>是使用 javascript 生成的。

Answer 1

没有自动对表格或页面进行分页的 Foundation 机制。您需要使用 javascript 将分页 html 连接到您的数据。

这是一种方法:javascript 创建一个单独的 <table>对于每一页。它还添加了一个新的 <li>分页元素 <ul>对于每一页。使用javascript事件添加.show或 .hide单击分页元素时将类添加到页面。

此示例非常人为设计，但展示了如何实现它。 JSFiddle .请注意，如果在移动尺寸上显示， fiddle 会折叠页码