jquery Datatables - 如何实现服务器端获取和客户端排序

Posted 2023-05-07

【中文标题】jquery Datatables - 如何实现服务器端获取和客户端排序

【英文标题】：jquery Datatables - how to achieve Server side fetching and Client side sorting

【发布时间】：2011-09-09 21:31:53

【问题描述】：

我正在使用datatables 插件来处理我们的表格。 我们有这个用例，我们需要通过使用 bServerSide 和 sAjaxSource 的 ajax 调用来获取数据（分页），但只想对该页面上的数据进行排序，而不是从服务器获取排序后的数据，就像在我们的例子中读取会很贵。

有可能吗？如果是，请建议如何进行。 提前致谢！！

【问题讨论】：

所以你只想排序 1 页，而不是整个结果集？

你有想过这个问题吗？需要相同的解决方案！

您有独特的要求，我正在寻找对货币、持续时间等列的服务器端自定义排序。

【参考方案1】：

我读过这个可能对你有帮助的讨论：基本上你必须用这些选项初始化表格；

"bServerSide" : false,
"sAjaxSource" : "path to your ajax source"

这样，数据只加载一次，所有过滤都由客户端完成。

如果你想加载更多数据，你可以使用fnReloadAjax。你可以阅读this关于这个话题的讨论，我认为它有你需要的所有答案。

编辑 - 使用管道，您可以避免频繁调用服务器以进行分页（如果您过滤数据，则调用服务器）。 如果您只想将数据获取到服务器一次，然后在客户端过滤数据，则必须禁用服务器端处理（上述选项设置为白色）。如果您禁用服务器端处理，您可以为用户提供一种使用“fnReloadAjax”（例如按钮）从服务器获取附加数据的方法。

我仍然没有得到什么，您是否需要从服务器获取一些其他数据或用户首先获得的任何数据都可以？

编辑 2 - 如果您不想调用服务器，则可以通过增强现有表来完全避免使用 AJAX。只需像这样创建 html 服务器端：

 <table  border="0" id='rdr_home' class='tablesorter'>
        <thead>  
          <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
          </tr>
        </thead>
        <tbody>
    <?php 
    foreach ($rows as $row)
    //echo all rows here (be careful as for each row you must 
    //have as many <td> as the column: no colspan!
    
    ?>
        </tbody>
    </table>

然后像这样创建你的数据表

oTable = $('.tablesorter').dataTable(
        "aaSorting": [[2, "asc"]],
        "bAutoWidth": false,
        "bFilter": false,
        "sDom": 'T<"clear">lfrtip',
        "aoColumns": [
                     "sType": "html" ,
                     "sType": "html" ,
                    null
                ],
        "oLanguage": 
            "sUrl": "templates/rhuk_milkyway/dataTables/media/language/it_IT.txt"
        
    );

有了这个，你就有了分页和过滤服务器端

编辑 3 - 在您提到的情况下（数据表负责分页但不要求过滤），我认为您必须添加一些额外的插件。您必须像这样在初始化时禁用数据表的过滤器和排序器；

    "bFilter": false,
    "bSort": false,

然后使用另一个组件对屏幕上的内容进行排序过滤。您可以在这里查看带有排序和过滤的解决方案：http://silverwareconsulting.com/index.cfm/2008/10/2/jquery-autofiltering-table

（我个人不喜欢通过点击进行过滤的想法，但如果您想使用更多符合您口味的东西，您可以在此基础上进行构建），无论如何您都不能使用数据表内置过滤器，如果您允许服务器端分页

【讨论】：

所以，如果我在流水线示例中将缓存大小设置为 1，我想我的用例应该得到服务。

我编辑了我的答案。要使用流水线来避免调用服务器，您应该将“iPipe”设置为非常高的值。

所以用例是这样的 - 对于搜索条件，总结果集可能是 10K 行。因为它非常大，我们想一次获取 100 行（分页）。但我想让用户一次只对这 100 行进行排序。因此，分页需要在服务器端完成，而不是排序。排序只需要在当前页面上进行即可。

请记住，流水线只会避免调用服务器进行分页，而不是过滤。

不管怎样，我们也可以避免排序的调用。

【参考方案2】：

我有一些几乎相同的东西在运行，并且解决方案一直在流水线上——没有其他神奇的东西，也不需要结合其他解决方案。将管道容量设置得高——在我的例子中，我基本上是向前和向后抓取 5 个“组”结果（页面 * 显示结果）——并相信 Datatables 会完成剩下的工作。

在我的应用程序的一个实例中，我正在处理超过 500 万条记录。是的，很多。我已经对系统的各种元素进行了大量测试，包括查询、数据库优化、索引和 UI 模式的使用。所有这些都表明该系统对于这种情况是最有效的。对于您的情况，我强烈建议您进行一些性能监控，无论您决定查看哪些（如果有）瓶颈存在。在我超过 500 万条记录的系统中，我正在查看大约 2-4 秒的查询时间和每页或排序 +-5% 的负载，这当然是可以管理的。我有数百名用户和相当多的其他流程要同时处理，自大约 6 个月前实施多个 DataTables 以来，我们没有看到明显的滞后。

从 UI 的角度来看，仅对屏幕上的数据进行排序的缺点是不直观。当我可以访问网格上的数千或数百万条记录并对其进行排序或过滤时，我希望看到所有可用记录的排序和过滤。这听起来很傻，但请记住，UI 设计的科学就是创建用户“熟悉”的模式。