使用 jQuery 处理服务器端的数据表

Question

我是数据表的新手。 自前两天以来，我一直在尝试寻找服务器端处理的解决方案，但没有找到解决方案。

我的JS代码是

this.$("#example").DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "../employees.json",
            "columns": [{
                "data": "Name"
            }, {
                "data": "Age"
            }, {
                "data": "Country"
            }, {
                "data": "Address"
            }, {
                "data": "Married"
            }]
        });

Datatable 以表格格式呈现 JSON。 但是排序、分页和搜索操作不起作用。 无论我从下拉列表中选择了多少值，它都会在第一页上显示所有结果

同样在底部它会显示类似“显示 0 到 0 个条目中的 0 个条目（从 NaN 总条目过滤）”的消息

如果我通过 serverSide: false。 一切正常。 但我想要相同的服务器端处理

任何帮助，将不胜感激

Answer 1

当您将 serverSide 设置为 true 时，您是在告诉 DataTables 服务器将处理所有排序和分页而不是 DataTables。 DataTables 只会按原样显示来自服务器的数据。

因此，如果您的服务器忽略从 DataTables 发送的所有排序和分页参数，那么数据看起来会很有趣。 （在您的情况下，无论请求的页面大小如何，服务器似乎都列出了所有记录）。

您有两个选择：

1. 保持服务器端为假。 让服务器向 DataTables 发送所有数据并让它处理排序、分页、排序。 通常这对于中等数量的记录（50,000 条记录或更少）就足够了
2. 修改服务器以按照 DataTables 的要求正确处理排序、分页、排序。 您将需要提供更多信息（例如用于分页的记录总数），因为 DataTables 无法从 1 页的数据中推断出该信息。 见https://datatables.net/manual/server-side#Sent-parameters看什么参数数据表发送到服务器和https://datatables.net/manual/server-side#Returned-data详情，以了解该服务器应该返回。

Answer 2

在你的 json 表单的返回中必须有这些：

iTotalRecords : (Total rows),
iTotalDisplayRecords : (Total rows to display in your grud),
aaData : {(Your data)}.

为我工作。

Answer 3

有一些选项必须设为 true

例如

this.$("#example").DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "../employees.json",
            "columns": [{
                "data": "Name"
            }, {
                "data": "Age"
            }, {
                "data": "Country"
            }, {
                "data": "Address"
            }, {
                "data": "Married"
            }],            
            'scrollCollapse': true,
            'ordering': true,
            'order': [[0, 'asc']],
            'searching': true,
            'paging': true,
        });

Answer 4

这可能会晚，但您可以使用 fnInfoCallback 例如：

"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
                           if (isNaN(iTotal)) { 
                           return '';
                           }

                    return "Showing " + iStart +" to "+ iEnd + " of " + iTotal + " entries";
                      },