jQuery DataTables：未捕获的类型错误：无法读取未定义的属性“长度”

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'
                        ]
                    });
                });
            });

我试图从一个宁静的 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

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

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

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

更改初始化选项如下：

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

有关此错误和其他常见控制台错误的更多信息，请参阅jQuery 数据表：常见 JavaScript控制台错误。