javascript - jQuery 数据表 : Uncaught TypeError: Cannot read property 'length' of undefined

Question

代码:单击提交按钮后，一旦用户输入文本，应用程序就会访问具有 JSON 格式数据的其余 API。代码应处理 JSON 数据并来自 jquery 数据表。

$(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 数据表，但出现以下错误:

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) or Cannot read property 'length' of undefined (other browsers) with 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有关此错误和其他常见控制台错误的更多信息。