无法读取数据表中未定义的属性长度
我试图在 Datatable 上显示一些数据。数据是从 Ajax 请求调用的,响应是一个 Json 数组,如下所示:
[{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]
这是我的请求:
<script>
$(document).ready(function() {
$('mytable').DataTable( {
"ajax": "myurl",
"dataType": 'json',
"dataSrc": '',
"columns": [
{"data": "item" },
{"data": "price" },
{"data": "status"},
]
} );
} );
</script>
这是我的 HTML:
<table id="mytable" class="display" style="width:100%">
<thead>
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>STATUS</th>
</tr>
</thead>
</table>
问题是数据未显示在表格上。 我认为问题发生在 Datatables 尝试处理我的 JSON 数据时,因为我的控制台上出现此错误:
Uncaught TypeError: Cannot read property 'length' of undefined
首先,您不需要用 HTML 制作表格。 Datatables 创建表。
第二件事是您没有正确调用表
$('#mytable')
第三,您似乎没有将任何数据传递给表:
使用您的数据创建一个变量:
var data = [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]
将其添加到表中:
$('#mytable').DataTable( {
"data": data,
"columns": [
{"data": "item" },
{"data": "price" },
{"data": "status"},
]
} );
} );
链接到小提琴 https://jsfiddle.net/edpbk0gc/3/
编辑
由于您正在执行
ajax
调用时,您需要指定
"ajax"
而不是
"data"
$('#mytable').DataTable( {
ajax: {
url: "/fetch_data",
type: "GET",
data: {
id: id
},
},
"columns": [
{"data": "item" },
{"data": "price" },
{"data": "status"},
]
} );
} );
基本上,您只需在其中按照自己喜欢的方式执行 ajax 调用即可。
参考此 文档 。
按照@ricks 所述,将您的表选择器替换为
$('#mytable')
,并且您需要将 ajax 中的 json 与数据表所需的格式进行匹配,如下所示:
{
data: [{"item": "one", "price": 22, "status": "free"}, {"item": "two", "price": 15, "status": "taken"}]
}
我知道这个问题问了好久了,但尽管如此,我想我知道如何解决它。
dataSrc
属性的位置不对。
datatable
设置中的“ajax”节点需要分解为一个对象。在对象内部,您需要指定
dataSrc
属性并将其设置为空字符串。
因此,新代码应如下所示:
<script>
$(document).ready(function() {
$('mytable').DataTable( {
"ajax": {
"url":"myurl",
"type":"GET",
"dataSrc": ""
},
"columns": [
{"data": "item" },
{"data": "price" },
{"data": "status"},
]
});
});
</script>
观察
"ajax": "myurl"
如何更改为
"ajax": {
"url": "myurl",
"type": "GET",
"dataSrc": ""
}