DataTables无法显示Ajax数据

Question

我正在尝试使用以下HTML:显示来自Ajax源的数据

<table class="table-striped data-table" data-src="https://my.site/json-url" data-columns='["id","sku","name","base_stock","stock","sales"]'>
<thead>
<tr>
<th>ID</th>
<th>SKU</th>
<th>Name</th>
<th>Initial Stock</th>
<th>Current Stock</th>
<th>Sales</th>
</tr>
</thead>
</table>

这个JS:

$('.data-table').each(function(){
var src = $(this).data('src');
var cols = $(this).data('columns').map(x => {return {data: x};});
$(this).DataTable({
"responsive": true,
"ajax": src,
"columns": cols
});
});

其中，https://my.site/json-url正常响应为：

{
"status": "success",
"data": [
{
"id": 1515,
"sku": "",
"name": "Test Simple",
"base_stock": 10,
"stock": 10,
"sales": 0
},
{
"id": 1512,
"sku": "BWTEST",
"name": "Test Variable - Black / White",
"base_stock": 9,
"stock": 9,
"sales": 0
},
{
"id": 1513,
"sku": "CLRTEST",
"name": "Test Variable - Multi-Color",
"base_stock": 4,
"stock": 4,
"sales": 0
}
]
}

然而，我得到了错误：Uncaught TypeError: cannot use 'in' operator to search for "length" in "id"在jquery.min.js:2:1065。有人能帮忙吗？

注意：我可以看到实际上没有向https://my.site/json-url发出ajax请求，因此错误似乎甚至在ajax调用之前就已经发生了。

Answer 1

您的自定义data-标记与数据表data-标记冲突。

https://www.datatables.net/manual/options#HTML-5-数据属性

DataTables还可以使用从HTML5 data-*属性读取的初始化选项。这提供了一种直接在HTML中设置选项的机制，而不是使用Javascript

重命名你的data-属性，你就可以了(只要你没有选择另一个冲突的名称…(

为了确认，为了排除ajax和datatables选项，将所有内容都删除到最低限度也会出现错误：

$('.data-table').each(function() {
$(this).DataTable({
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table class="table-striped data-table" data-src="https://my.site/json-url" data-columns='["id","sku","name","base_stock","stock","sales"]'>
</table>

当更改data-属性名称时，会删除错误

$('.data-table').each(function() {
$(this).DataTable({
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<table class="table-striped data-table" data-my-src="https://my.site/json-url" data-my-columns='["id","sku","name","base_stock","stock","sales"]'>
</table>

(不要使用-my-，它只是用于演示(