基金会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> 

这是我的表：

内 <tbody></tbody>

<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生成的。

Answer 1

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

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

这个例子很有意思，但是展示了如何实现这个。 JSFiddle。请注意，如果手机上显示页码，小提琴会折叠页码