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 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>。它还在每个页面的分页<ul> 中添加了一个新的<li> 元素。当点击分页元素时，使用javascript事件将.show或.hide类添加到页面中。

这个例子非常做作，但展示了如何实现它。 JSFiddle。请注意，如果它以移动尺寸显示，小提琴会折叠页码