Foundation 6 分页，如何分页Table？

Question

我是 Foundation 6 的新手，但我需要使用分页插件对 Foundation 6 table 进行分页。如何对 table 进行分页？如何连接 table 与分页器？这里是来自 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>。它还为每个页面的分页 <ul> 添加了一个新的 <li> 元素。当分页元素被点击时，使用 javascript 事件向页面添加 .show 或 .hide class。

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

Foundation 6 分页，如何分页Table？

Foundation 6 pagination, how to paginate a Table?

html

css

pagination

zurb-foundation