使用HTML表格和Ajax的分頁設計

什麼是在HTML表格中顯示分頁結果並使用Ajax請求動態重新填充的最佳設計方法？使用HTML表格和Ajax的分頁設計

我正在使用PHP，jQuery和Bootstrap，但這對於這個問題應該沒什麼問題。目前，我正在考慮以下結構，作爲一個例子：

<table> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
     </tr> 
    </thead> 
    <tbody> 
    <!-- Populated by Ajax --> 
    </tbody> 
</table> 
<!-- Paginator HTML generated server-side --> 
<ul class="paginator"> 
    <li><a href="?p=1">First</a></li> 
    <li><a href="?p=1">Prev</a></li> 
    <li><a href="?p=1">1</a></li> 
    <li class="active"><a href="?p=2">2</a></li> 
    ... etc ... 
    <li><a href="?p=3">Next</a></li> 
    <li><a href="?p=20">Last</a></li> 
</ul>

這種運作良好，但這種設計的缺點是，我需要更新分頁程序ul如下：

檢查，如果我需要第一/上一頁/下一頁/最後的控制和連接/分離它們（不能顯示/隱藏在這裏，因爲圓角在引導應用於li:first-child a和li:last-child a）
移動active類正確的元素
服務器側產生分頁程序需要被更新的客戶端：的代碼可能複製

另一種方法是把這個ul在表內的<tfoot></tfoot>部。這意味着paginator更新服務器端，這是很好，很棒。但後來我有以下缺點：

更改Ajax請求返回所有三個thead，tbody和tfoot部分，因爲我不得不$.load()的table元素，該元素tbody代替。
重新分配的分頁程序鏈接的點擊處理程序之後$.load ING要處理的JavaScript（鏈接在那裏爲漸進增強）
的分頁程序部分

你會怎麼做的可能閃爍？

來源

2014-10-09 Wouter Thielen

在填充表的情況下，我用了很多jQuery的數據表插件，它提供的是一個Ajax解決方案與排序，搜索和分頁：

http://www.datatables.net/

它配備了一個引導的主題了。

看看他們的網站中的AJAX和SERVER SIDE PROCESSING主題。

來源

2014-10-09 15:15:56 iag

感謝您的回覆！這不是一個答案，但我會檢查出數據表插件，看看他們如何構建他們的HTML和他們把paginator元素放在哪裏，然後回到這裏。 – 2014-10-10 14:06:35

使用HTML表格和Ajax的分頁設計

回答

相關問題