jQuery 数据表：无法读取未定义的属性“长度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34287402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables: Cannot read property 'length' of undefined
提问by Abdelrahman Shoman
I understand this a popular issue, and I have read all the similar questions here on Stack Overflow and other sites (including the datatables website).
我明白这是一个流行的问题，我已经阅读了 Stack Overflow 和其他网站（包括数据表网站）上的所有类似问题。
To clarify, I am using
为了澄清，我正在使用
- PHP Codeigniter
- Materliazecss
- PHP代码点火器
- 材料学
I have also made sure that I received the JSON array correctly:
我还确保我正确收到了 JSON 数组：
[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]
My HTML table looks like this:
我的 HTML 表格如下所示：
<table id="customer_table">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
</table>
And here is my document.readyfunction:
这是我的document.ready功能：
$(document).ready(function(){
//$('#customer_table').DataTable();
$('#customer_table').DataTable( {
"ajax": 'json',
"dataSrc": "",
"columns": [
{ "data": "email" },
{ "data": "name_en" }
]
});
});
The error I am getting is
我得到的错误是
Uncaught TypeError: Cannot read property 'length' of undefined
未捕获的类型错误：无法读取未定义的属性“长度”
采纳答案by Gyrocode.com
CAUSE
原因
This errors TypeError: Cannot read property 'length' of undefinedusually means that jQuery DataTables cannot find the data in the response to the Ajax request.
此错误TypeError: Cannot read property 'length' of undefined通常意味着 jQuery DataTables 无法在对 Ajax 请求的响应中找到数据。
By default jQuery DataTables expects the data to be in one of the formats shown below. Error occurs because data is returned in the format other than default.
默认情况下，jQuery DataTables 期望数据采用下面显示的格式之一。错误是因为数据以非默认格式返回。
Array of arrays
数组数组
{
"data": [
[
"Tiger Nixon",
"System Architect",
"0,800",
"2011/04/25",
"Edinburgh",
"5421"
]
]
}
Array of objects
对象数组
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "0,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
]
}
SOLUTION
解决方案
Use default format or use ajax.dataSrcoption to define data property containing table data in Ajax response (databy default).
使用默认格式或使用ajax.dataSrc选项定义包含 Ajax 响应中的表数据的数据属性（data默认情况下）。
See Data array locationfor more information.
有关详细信息，请参阅数据数组位置。
LINKS
链接
See jQuery DataTables: Common JavaScript console errorsfor more details.
有关更多详细信息，请参阅jQuery 数据表：常见 JavaScript 控制台错误。
回答by tomsoft
It's even simpler: just use dataSrc:''option in the ajax defintion so dataTable knows to expect an array instead of an object:
甚至更简单：只需dataSrc:''在 ajax 定义中使用选项，这样 dataTable 就知道需要一个数组而不是一个对象：
$('#pos-table2').DataTable({
processing: true,
serverSide: true,
ajax:{url:"pos.json",dataSrc:""}
}
);
See ajax options
查看ajax 选项
回答by Abdelrahman Shoman
OK, thanks all for the help.
好的，谢谢大家的帮助。
However the problem was much easier than that.
然而，问题比这要容易得多。
All I need to do is to fix my JSON to assign the array, to an attribute called data, as following.
我需要做的就是修复我的 JSON 以将数组分配给名为 data 的属性，如下所示。
{
"data": [{
"name_en": "hello",
"phone": "55555555",
"email": "a.shouman",
"facebook": "https:\/\/www.facebook.com"
}, ...]
}
回答by Nisal Edu
Try as follows the return must be d, not d.data
尝试如下返回必须是d，而不是d.data
ajax: {
"url": "xx/xxx/xxx",
"type": "GET",
"error": function (e) {
},
"dataSrc": function (d) {
return d
}
},
回答by gvivetapl
If you are using ajax as a function remember it expects JSON data to be returned to it, with the parameters set.
如果您使用 ajax 作为函数，请记住它期望将 JSON 数据返回给它，并设置参数。
$('#example').dataTable({
"ajax" : function (data, callback, settings) {
callback({
data: [...],
recordsTotal: 40,
recordsFiltered: 40}
));
}
})
回答by chetan
When you have JSON data then the following error appears
当您有 JSON 数据时，会出现以下错误
A better solution is to assign a var datafor the local json array object,
details see: https://datatables.net/manual/tech-notes/4
更好的解决方案是var data为本地json数组对象赋值，详情参见：https: //datatables.net/manual/tech-notes/4
This is helps you to display table contents.
这有助于您显示表格内容。
$(document).ready(function(){
$('#customer_table').DataTable( {
"aaData": data,
"aoColumns": [{
"mDataProp": "name_en"
}, {
"mDataProp": "phone"
}, {
"mDataProp": "email"
}, {
"mDataProp": "facebook"
}]
});
});
回答by Haris ur Rehman
In my case, i had to assign my json to an attribute called aaDatajust like in Datatables ajax examplewhich data looked like this.
就我而言，我必须将我的 json 分配给一个名为aaData的属性，就像在 Datatables ajax 示例中一样，数据看起来像 这样。
回答by Roman Susi
While the above answers describe the situation well, while troubleshooting the issue check also that browser reallygets the format DataTables expects. There maybe other reasons not to get the data. For example, if the user does not have access to the data URL and gets some HTML instead. Or the remote system has some unfortunate "fix-ups" in place. Network tab in the browser's Debug tools helps.
虽然上述答案很好地描述了情况，但在解决问题的同时，还要检查浏览器是否确实获得了 DataTables 期望的格式。可能还有其他原因无法获取data. 例如，如果用户无权访问数据 URL 而是获取一些 HTML。或者远程系统有一些不幸的“修复”。浏览器调试工具中的网络选项卡有帮助。
回答by HamzaMushtaq
you can try checking out your fields as you are rendering email field which is not available in your ajax
您可以在呈现 ajax 中不可用的电子邮件字段时尝试检查您的字段
$.ajax({
url: "url",
type: 'GET',
success: function(data) {
var new_data = {
"data": data
};
console.log(new_data);
}
});