jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefined

Question

代码：点击提交按钮后，一旦用户输入文本，应用程序将点击其余 API，其中包含 JSON.The 格式的数据，代码应处理 JSON 数据和 jquery 数据 table.

$(document).ready(function() {
                $('#txt').click(function () {
                    var requestData = $('#txtid').val();
                    var url = '<my api url>' + requestData;
                    $('#resultDiv1').dataTable({
                        "processing": true,
                        "ajax": url,
                        "columns": [
                            {"": "account.id"},
                            {"": "account.rel"},
                            {"": "account.fin"},
                            {"": "account.date"}
                        ],
                        "dom": "Bfrtip",
                        "buttons": [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ]
                    });
                });
            });

我正在尝试从 restful API 形成 Jquery 数据 table 但出现以下错误：

Uncaught TypeError: Cannot read property 'length' of undefined
            at jquery.dataTables.min.js:48
            at i (jquery.dataTables.min.js:35)
            at Object.success (jquery.dataTables.min.js:35)
            at fire (jquery-1.12.4.js:3232)
            at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
            at done (jquery-1.12.4.js:9840)
            at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

Ajax 响应：这是来自 RestAPI 的 Ajax 的格式：

  {
      "account": [
        {
          "id": "1", 
          "rel": "P", 
          "fin": "abc", 
          "date": "2001-01-05"
        }, 
        {
           "id": "2", 
          "rel": "P", 
          "fin": "def", 
          "date": "2001-02-05"
        }, 
        {
          "id": "3", 
          "rel": "R", 
          "fin": "ghi", 
          "date": "2019-01-05"
        }
      ]
    }

有人可以解释一下为什么会出现这种情况以及我需要进行哪些更改吗？

Answer 1

错误 Unable to get property 'length' of undefined or null reference (IE) 或 Cannot read property 'length' of undefined（其他浏览器）与 jQuery DataTables 通常意味着插件无法响应 Ajax 请求访问数据。

使用 ajax.dataSrc 选项在包含数据的 Ajax 响应中指定数据属性 (account)。

您的代码还缺少适当的 columns.data 选项。

按如下方式更改您的初始化选项：

$('#resultDiv1').dataTable({
    // ... skipped other options ...
    "ajax": {
       "url": url,
       "dataSrc": "account"
    },
    "columns": [
        {"data": "id"},
        {"data": "rel"},
        {"data": "fin"},
        {"data": "date"}
    ]
});

有关此错误和其他常见控制台错误的详细信息，请参阅 jQuery DataTables: Common JavaScript console errors。

jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefined

jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefined

javascript

jquery

jquery-plugins

datatables