javascript 数据表 - 未捕获的类型错误：无法读取未定义的属性“长度”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29568016/
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 - Uncaught TypeError: Cannot read property 'length' of undefined
提问by Philip Wiggins
I've seen several examples of this problem but still haven't been able to find a resolution.
我已经看到了这个问题的几个例子，但仍然无法找到解决方案。
The error says it breaks on jquery.dataTables.js (version 1.10.4) on line 3287 shown below
该错误表示它在第 3287 行的 jquery.dataTables.js（版本 1.10.4）上中断，如下所示
// Got the data - add it to the table
for ( i=0 ; i<aData.length ; i++ ) {
_fnAddData( settings, aData[i] );
}
This is my controller. The controller is this way because the the lack of db connection right now, but will have JSON returned in the same format as $data. I have tried several things to resolve the error, but keep running into other issues. The JSON IS valid.
这是我的控制器。控制器是这样的，因为现在缺少 db 连接，但将以与 $data 相同的格式返回 JSON。我尝试了几种方法来解决错误，但一直遇到其他问题。JSON 有效。
public function test()
{
$data = '{"persons": [{"branch": "CORP","phone_numbers": [{"desk": "5223422117"},{"mobile": "5022319224"},{"branch": "422-922-2291"}],"email": "[email protected]","preferred_name": "Thomas","person_id": 368,"department": "IT","first_name": "Thomas","title": "Programming Manager","last_name": "Williams"}]}';
$data = json_encode($data);
echo $data;
}
My javascript
我的 JavaScript
$(document).ready(function() {
$('#directory_table').dataTable( {
"ajax": {
"url": "test",
"type": "JSON"
},
"aoColumns": [
{ "persons": "preferred_name" },
{ "persons": "last_name" },
{ "persons": "phone_numbers.0" },
{ "persons": "phone_numbers.1" },
{ "persons": "phone_numbers.2" },
{ "persons": "email" },
{ "persons": "department" },
{ "persons": "title" }
]
} );
} );
My HTML
我的 HTML
<table id='directory_table' class="display">
<thead>
<tr style='background: #186A9F; color: white;'>
<th>First Name </th>
<th>Last Name</th>
<th>Desk Number</th>
<th>Mobile</th>
<th>Branch</th>
<th>Email</th>
<th>Department</th>
<th>Title</th>
</tr>
<thead>
</table>
回答by Gyrocode.com
CAUSE
原因
By default DataTables expects JSON response to have certain structure, see documentation.
默认情况下，DataTables 期望 JSON 响应具有特定结构，请参阅文档。
Array of arrays:
数组数组：
{
"data": [
[ "value1", "value2" ],
...
]
}
Array of objects:
对象数组：
{
"data": [
{
"attr1": "value1",
"attr2": "value2"
},
...
]
}
Error occurs because name of the data property in your response holding array of objects (persons) differs from default (data).
发生错误是因为包含对象数组 ( persons) 的响应中数据属性的名称与默认值 ( data)不同。
SOLUTION
解决方案
Use ajax.dataSrcoption to define the property from the data source object (i.e. that returned by the Ajax request) to read.
使用ajax.dataSrc选项定义从数据源对象（即Ajax 请求返回的）读取的属性。
$('#directory_table').dataTable( {
"ajax": {
"url": "test",
"dataSrc": "persons"
},
"columns": [
{ "data": "preferred_name" },
{ "data": "last_name" },
{ "data": "phone_numbers.0.desk" },
{ "data": "phone_numbers.1.mobile" },
{ "data": "phone_numbers.2.branch" },
{ "data": "email" },
{ "data": "department" },
{ "data": "title" }
]
});
Alternatively if you can change data property name in JSON response from personsto data, then adding "dataSrc": "persons"wouldn't be needed.
或者，如果您可以将 JSON 响应中的数据属性名称从 更改persons为data，则"dataSrc": "persons"不需要添加。
DEMO
演示
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
LINKS
链接
See jQuery DataTables: Common JavaScript console errorsfor more information on this and other common console errors.
有关此错误和其他常见控制台错误的更多信息，请参阅jQuery 数据表：常见 JavaScript控制台错误。
