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>

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

Answer 1

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

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

这个例子非常人为，但展示了如何实现这一点。 JSFiddle。请注意，如果页面编号显示在移动尺寸

上，则小提琴会折叠页码

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

1 个答案: