数据表：无法读取未定义的属性“长度”

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

为了澄清，我正在使用

• PHP Codeigniter
• 物质学

我还确保我正确接收了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" }
                ]
            });
  });

我得到的错误是

Uncaught TypeError：无法读取未定义的属性“ length”

原因

此错误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控制台错误。

它甚至更简单：只需dataSrc:''在ajax定义中使用option，以便dataTable知道期望使用数组而不是对象：

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

查看ajax选项

好的，谢谢大家的帮助。

但是，问题要容易得多。

我需要做的就是修复我的JSON，以将数组分配给名为data的属性，如下所示。

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

尝试如下，返回必须是d，而不是d.data

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

如果您将ajax用作函数，请记住，它期望在设置了参数的情况下将JSON数据返回给它。

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

当您具有JSON数据时，会出现以下错误

更好的解决方案是var data为本地json数组对象分配一个，详细信息请参见：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"
                        }]
            });
        });

就我而言，我有我的JSON指派给名为属性aaData就像在数据表 ajax的例子看起来像数据 这样。

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

上面的答案很好地描述了这种情况，在对问题进行故障排除的同时，还检查了浏览器是否确实获得了DataTables期望的格式。也许还有其他原因无法得到赔偿data。例如，如果用户无权访问数据URL，而是获取一些HTML。或远程系统上有一些不幸的“修复程序”。浏览器的“调试”工具中的“网络”选项卡会有所帮助。

晚会真的很晚，但是上面的解决方案都不适合我。我不想要“ Found total xxx records”，所以我添加info:false到了配置中。当我删除时，一切正常。

我应该注意第一页加载良好。当我单击下一步时，第二个页面已加载，但立即引发了上述控制台错误

您可以在渲染电子邮件字段时尝试检查您的字段，而该字段在您的ajax中不可用

$.ajax({
  url: "url",
  type: 'GET',
  success: function(data) {
    var new_data = {
      "data": data
    };
    console.log(new_data);
  }
});