问题描述
|
我在这里寻找一些一般的智慧。
我正在寻找一种优雅的简单方法来限制表中带有\“ view all >> \”的页面上显示的行数,以在视图中显示整个表。我考虑了以下所有问题,...综合考虑:
两个不同的部分,...一个列出的行数有限,底部带有“查看所有>> \”链接,第二个列出的行中所有底部带有一个“ collapse >> \”链接。
使用jQuery
CSS解决方案
阿贾克斯
除了您选择一个或另一个的理由外,任何链接和/或摘录也将有所帮助。我宁愿在不创建大量程序员(我)独创性的编码纪念碑的情况下,最小化服务器/数据库请求。
谢谢!
更新:请看这里查看之前可以修改的代码。非常感谢Neal提供的jsfiddle.net资源。
解决方法
Grid是大表的绝佳解决方案。我选择的网格是DataTables
网格解决了许多问题:排序,分页,过滤,ajax加载以及显示/隐藏结果。您可能只在谈论方程式的极限部分,但我认为所有功能在接口中都有其价值,因此都值得一看。
设置起来很容易,并且有三个数据选项:
用
<thead>
和<tbody>
标签建立适当的HTML表格。网格会相应地解释DOM和样式。
提供带有表数据的有效JSON字符串。 DataTables为您构建HTML。
通过AJAX提供JSON。这也使您可以“流水线”数据以在所需数据之前和之后查找数据。
数据表是JQuery驱动的,因此您必须包含Jquery和DataTables代码。还有一点CSS使事情“很漂亮”就可以了。一旦掌握了窍门,从头开始生成新的DataTable将需要2-3分钟。考虑到这些功能,这是对UI的最小投资。
至于性能,我有一个DataTable可以处理250万条记录。它利用JSON管道,分页,排序和过滤(以及索引良好的MySQL DB)来维持可接受的性能。