基础6分页，如何分页表？

Question

我是基础6的新手，但我需要使用分页插件分页基础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

没有自动分页的基础机制。您需要使用javascript将分页html连接到数据。

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

这个例子是精心设计的，但是展示了如何实现它。JSFiddle。请注意，如果在移动大小上显示，小提琴会折叠页码。