什么是最优雅的手风琴/“显示更多＆gt;＆gt;”解？

Question

我在这里寻找一些普遍的智慧。

我正在寻找一种优雅简单的方法来限制表格中显示的行数，这些行在“view all＆gt;＆gt;”页面上显示获取视图中显示的整个表格。我考虑了以下所有内容，......有些结合起来：

1. 两个不同的部分，...一个列出有限数量的行，其中包含“查看全部＆gt;＆gt;”在底部链接，第二个列出所有“崩溃＆gt;＆gt;”链接在底部。
2. 使用jQuery
3. 一个css解决方案
4. AJAX

除了您选择其中一个链接和/或片段的理由之外，任何链接和/或片段都会有所帮助。我宁愿最小化服务器/数据库请求而不创建程序员（我）的聪明才智的大量编码纪念碑：=]

谢谢！

更新：查看here以查看之前编写的代码可以进行调整。非常感谢Neal提供的jsfiddle.net资源。

Answer 1

大表的大解决方案是Grid。我选择的网格是DataTables

网格解决了很多问题：排序，分页，过滤，ajax加载以及显示/隐藏结果。你可能只讨论等式的限制部分，但我认为所有的特征在界面上都有一个值，所以它们都值得一看。

设置很简单，您有三种数据选择：

1. 使用<thead>和<tbody>标记构建正确的HTML表格。网格相应地解释了DOM和样式。
2. 提供包含表数据的有效JSON字符串。 DataTables为您构建HTML。
3. 通过AJAX提供JSON。这也允许您“管道化”数据，以便在所需的数据之前和之后查找数据。

Datatables是JQuery驱动的，因此您必须包含Jquery和DataTables代码。还有一些CSS让事情“漂亮”就是这样......非常简单。一旦掌握了它，从头开始生成一个新的DataTable需要2-3分钟。考虑到这些功能，这是对UI的最小投资。

至于性能，我有一个DataTable可以处理250万条记录。它利用JSON流水线，分页，排序和过滤（以及索引良好的MySQL数据库）来保持可接受的性能。