2017-06-30 23 views
0

我是新來的基金會6,但我需要使用分頁插件分類基礎6表。如何分頁表格?如何將表格與分頁器連接? 這裏的常規代碼從http://foundation.zurb.com/sites/docs/pagination.html基金會6分頁,如何分頁表格?

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

回答

0

沒有基礎機制來自動分頁表或頁面。您需要使用javascript將分頁html連接到您的數據。

這是一種方法:javascript爲每個頁面創建一個單獨的<table>。它還爲每個頁面的分頁<ul>添加了一個新的<li>元素。當點擊分頁元素時,使用javascript事件將.show.hide類添加到頁面。

這個例子很有意思,但是展示瞭如何實現這個。 JSFiddle。請注意,如果手機上顯示頁碼,小提琴會摺疊頁碼

+0

謝謝您的建議! – MobileOS