时间戳

首页 > 解决方案 > DataTables 无法显示 Ajax 数据

jquery - 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,
      "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. 有人可以帮忙吗？

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

标签： jqueryajaxdatatables

解决方案

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

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

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-它只是为了演示）

推荐阅读