jQuery DataTables：未捕获的 TypeError：无法读取未定义的属性“长度”答案

【问题标题】：jQuery DataTables: Uncaught TypeError: Cannot read property 'length' of undefinedjQuery DataTables：未捕获的 TypeError：无法读取未定义的属性“长度”
【发布时间】：2017-07-24 19:50:14
【问题描述】：

代码：点击提交按钮后，一旦用户输入文本，应用程序会点击其他 API，该 API 具有 JSON 格式的数据。代码应处理 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"
        }
      ]
    }

有人能解释一下为什么会这样吗？我需要做出哪些改变？

【问题讨论】：

请展示您的 Ajax 响应示例。
@Gyrocode.com ：编辑问题

标签： javascript jquery jquery-plugins datatables

【解决方案1】：

使用 jQuery DataTables 时出现Unable to get property 'length' of undefined or null reference (IE) 或 Cannot read property 'length' of undefined（其他浏览器）错误通常意味着插件无法访问数据以响应 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。

【讨论】：