什么是最优雅的餐桌手风琴/“显示更多>>”解决方案?

问题描述

| 我在这里寻找一些一般的智慧。 我正在寻找一种优雅的简单方法来限制表中带有\“ 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)来维持可接受的性能。