DataTables: 无法读取未定义的属性'length'

Question

DataTables: 无法读取未定义的属性'length'

jqueryjsoncodeigniterdatatableshtml-table

100

我知道这是一个常见的问题，我已经阅读了在Stack Overflow和其他站点上的所有类似的问题（包括datatables网站）。

为了澄清，我正在使用：

PHP Codeigniter
Materliazecss

我还确保正确地接收了JSON数组：

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]

我的HTML表格长这样：

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>

这是我的document.ready函数：

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });

我遇到的错误是

未捕获的类型错误: 无法读取未定义的属性 'length'

- Abdelrahman Shoman

12个回答

79

原因

这个错误 TypeError: Cannot read property 'length' of undefined 通常意味着jQuery DataTables在Ajax请求的响应中无法找到数据。

默认情况下，jQuery DataTables希望数据格式为以下格式之一。如果返回的数据与默认格式不同，就会发生错误。

数组数组

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

对象数组

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

解决方案

使用默认格式或使用ajax.dataSrc选项在Ajax响应中定义包含表格数据的数据属性（默认为data）。

有关更多信息，请参见数据数组位置。

链接

有关详细信息，请参见jQuery DataTables：常见JavaScript控制台错误。

- Gyrocode.com

2

不得不佩服此回复所提供的细节数量。我已经修改了答案，以更好地指导即将到来的读者。 - Abdelrahman Shoman

47

好的，感谢大家的帮助。

然而，问题比那更容易解决。

我只需要修复我的JSON将数组分配给一个名为data的属性，如下所示。

{
  "data": [{
    "name_en": "hello",
    "phone": "55555555",
    "email": "a.shouman",
    "facebook": "https:\/\/www.facebook.com"
  }, ...]
}

- Abdelrahman Shoman

13

这是真的，但毫无意义。 - Muhammad Rehan Qadri

1

嗨，Abdel，你是如何添加“数据”的？谢谢。 - culter

1

@culter 我是通过将JSON数组分配给后端中的“data”变量来完成的，如下所示... $temp ='[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]'; $info['data'] = $temp; - Abdelrahman Shoman

我不想这样做，但它对我没有起作用。 - Hemant Nagpal

16

请尝试以下方法，返回值应为d，而不是d.data。

 ajax: {
      "url": "xx/xxx/xxx",
      "type": "GET",
      "error": function (e) {
      },
      "dataSrc": function (d) {
         return d
      }
      },

- Nisal Edu

1

非常感谢，整天都在寻找大海捞针。那段代码是干什么的？具体来说，从 error 到 return d 部分是干什么用的？我一直得到与上述相同的错误，但找不到错别字或其他原因，这解决了我的问题。 - Sum None

4

如果你使用ajax作为函数，请记住它期望返回JSON数据，并设置参数。

$('#example').dataTable({
    "ajax" : function (data, callback, settings) {
        callback({
            data: [...],
            recordsTotal: 40,
            recordsFiltered: 40}
            ));
    }
})

- gvivetapl

2

当你有JSON数据时，会出现以下错误 enter image description here

更好的解决方案是为本地JSON数组对象分配一个var data，详细信息请参见：https://datatables.net/manual/tech-notes/4 这可以帮助您显示表格内容。

 $(document).ready(function(){   

        $('#customer_table').DataTable( {
         "aaData": data,

           "aoColumns": [{
                            "mDataProp": "name_en"
                        }, {
                            "mDataProp": "phone"
                        }, {
                            "mDataProp": "email"
                        }, {
                            "mDataProp": "facebook"
                        }]
            });
        });

- chetan

1

当视图属性名称与数据表列部分中的名称不匹配时，可能会发生这种情况。确保属性名称和列数据名称匹配。

- dead_webdev

1

在我的情况下，我需要将我的JSON分配给一个名为aaData的属性，就像在Datatables中一样ajax example，数据看起来像this。

- Haris ur Rehman

0

虽然上面的答案已经很好地描述了情况，但在解决问题时，还要检查浏览器确实获得了DataTables期望的格式。可能有其他原因无法获取data。例如，如果用户无法访问数据URL并获得一些HTML。或者远程系统有一些不幸的“修复”措施。浏览器调试工具中的网络选项卡可以帮助解决问题。

- Roman Susi

0

这真的很晚了，但是上面的解决方案都不适用于我。我不想要 "Found total xxx records"，所以我在 config 中添加了 info:false。当我删除它时，一切都正常了。

我应该注意到第一页加载得很好。当我点击下一页时，第二页加载了，但立即抛出了上述控制台错误。

- Adam Hey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tomsoft · Accepted Answer

更简单的方法是：在ajax定义中使用dataSrc:''选项，这样dataTable就知道要期望一个数组而不是对象：

    $('#pos-table2').DataTable({
                  processing: true,
                  serverSide: true,
                  ajax:{url:"pos.json",dataSrc:""}
            }
    );

请参阅ajax选项