jQuery 数据表 - 未找到匹配的记录

Question

我正在使用 jQuery 带有服务器端分页的数据表。我已将我的 REST APIs 修改为 return 数据表文档中指定的必要数据。问题是页数、总行数等数据在 UI 中可见，但行数未见。我收到一条消息 'No matching records found'，但页数和总行数显示在数据表 UI 中。我还检查了 API 响应的网络选项卡，数据格式正确，如下所示：

{"recordsFiltered":34096,"data":[{"isCompleted":"true","stockNumber":0,"transactionCount":0},{"isCompleted":"false","stockNumber":1,"transactionCount":0},{"isCompleted":"false","stockNumber":2,"transactionCount":0},{"isCompleted":"false","stockNumber":3,"transactionCount":0},{"isCompleted":"false","stockNumber":4,"transactionCount":0},{"isCompleted":"false","stockNumber":5,"transactionCount":0},{"isCompleted":"false","stockNumber":6,"transactionCount":0},{"isCompleted":"false","stockNumber":7,"transactionCount":0},{"isCompleted":"false","stockNumber":8,"transactionCount":0},{"isCompleted":"false","stockNumber":9,"transactionCount":0}],"draw":1,"recordsTotal":34096}

Javascript代码：

$('#stocklist').DataTable({
                "serverSide": true,
                "ajax": {"url":"/fetchStocks,
                        "dataSrc": function(data){
                            return data;
                         }
                }
            });

每当我单击下一页图标时，服务器 return 都会提供正确的更新数据，并且数据表也会更新为最新的行数和页数。但是，这些行没有得到呈现，并且在浏览器控制台中也没有看到任何错误。如何调试这个以及我做错了什么？

Answer 1

如果要将dataSrc选项作为函数使用，需要进行修改：

"ajax": {
  "url":"/fetchStocks",
  "dataSrc": function(data){
    return data.data;
  }
}

(请注意：在您问题的示例中，URL 字符串缺少结束 "。这是一个语法错误，所以我认为它是copy/paste 某种问题。)

我把你的return data改成了return data.data。

原因是：当您将 JSON 响应分配给函数中的参数时，您最终会得到形状略有不同的 JSON 响应：

{
    "recordsFiltered": 34096,
    "data": {
        "data": [{
            "isCompleted": "true",
            "stockNumber": 0,
            "transactionCount": 0
        }, {
            "isCompleted": "false",
            "stockNumber": 1,
            "transactionCount": 0
        }, 
...
        }, {
            "isCompleted": "false",
            "stockNumber": 9,
            "transactionCount": 0
        }]
    },
    "draw": 1,
    "recordsTotal": 34096
}

现在，为了找到您的 table 数据开始的数组，您必须使用 data.data.

为了清楚起见：如果您的函数的参数名称是 foo，那么您将需要这个：

"ajax": {
  "url":"/fetchStocks",
  "dataSrc": function( foo ){
    return foo.data;
  }
}

话虽如此，这里没有必要使用 dataSrc，因为您没有以任何方式操纵 JSON（除了将其分配给新变量之外）。

默认情况下，DataTables 希望在名为 data 的顶级对象中找到 table 的数组数据 - 在您的原始 JSON 中它已经是：

{ "recordsFiltered":34096, "data": [{"isCompleted":"true", ...

jQuery 数据表 - 未找到匹配的记录

jQuery Datatables - No matching records found

javascript

jquery

datatables