基礎6ページ付け、テーブルのページ付け方法

Question

私は基礎6を初めて使いましたが、ページ分割プラグインを使用して基礎6テーブルをページ付けする必要があります。どのようにテーブルを改ページするのですか？どのようにpaginatorとテーブルを接続するには？ ここ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

テーブルやページを自動的にページ設定するためのFoundationメカニズムはありません。あなたはJavaScriptを使用してデータにページ分割HTMLを接続する必要があります。

これはこれを行う1つの方法です。JavaScriptはページごとに別々の<table>を作成します。また、ページごとに新しい<li>要素をページ番号<ul>に追加します。 javagriptイベントを使用して、ページ分割要素がクリックされたときにページに.showまたは.hideクラスを追加します。

この例は非常に工夫されていますが、これを実装する方法を示しています。 JSFiddle。携帯電話のサイズで表示されている場合は、ページ番号が折りたたまれます。