DataTables无法显示Ajax数据

如何解决DataTables无法显示Ajax数据

我正在尝试使用以下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,{
      "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调用之前，该错误似乎也正在发生。

解决方法

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

https://www.datatables.net/manual/options#HTML-5-data-attributes

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

重命名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","sales"]'>
</table>

（不要使用-my-只是为了演示）