使用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的分页设计

回答

相关问题