数据表不加载 JSON 数据，显示消息“表中没有可用数据”答案

【问题标题】：Datatable doesn't load JSON data, shows message "No data available in table"数据表不加载 JSON 数据，显示消息“表中没有可用数据”
【发布时间】：2020-04-10 18:46:00
【问题描述】：

我正在使用 Datatables.net 在我的 Shopify 网站上显示数据。例如，我只是将 JSON 数据设置为具有“itemcode”的 1 个键值对，然后是实际产品的项目代码。这是我的数据示例：

JSON 数据

{
  "jsonData": [
    {
      "itemcode": "0735340080 - Bearings"
    },
    {
      "itemcode": "BL208-Z - Bearings"
    },
    {
      "itemcode": "9109K - Bearings"
    },
    {
      "itemcode": "735330016 - Bearings"
    },
    {
      "itemcode": "699-ZZ - Bearings"
    },
    {
      "itemcode": "698-ZZ - Bearings"
    },
    {
      "itemcode": "697-ZZ - Bearings"
    }
  ]
}

我正在使用此代码来加载数据。为了澄清，JSON 是从页面上隐藏的 div 元素加载的：

Javascript 代码

  $(document).ready(function () {
    var jsonDataDiv = document.getElementById("json-data").innerText;
    var jsonData = JSON.parse(jsonDataDiv);

    var table = $('#tableAppend').DataTable({
      orderCellsTop: true,
      pageLength: 25,
      data: jsonData,
      "columns": [{jsonData: "itemcode"}],
      columnDefs: [
        {"className": "dt-center", "targets": "_all"}
      ],
    });    
});

调试窗口中未报告任何错误，但我的表格显示没有可用数据。我的 HTML 代码在这里：

HTML 代码

<table class="display" id="tableAppend" style="margin-left: 20px;margin-right: 20px;">
 <thead>
  <tr>
    <th class="dt-center">Item Code</th>
  </tr>
  </thead>
</table>

我一直在关注在线问答，但它们似乎与我的问题无关。

【问题讨论】：

标签： javascript jquery html datatables shopify

【解决方案1】：

问题在于表的初始化

查看https://codepen.io/mvinayakam/pen/abzpJar

$(document).ready(function () { var jsonDataDiv = document.getElementById("json-data").innerText; var jsonData = JSON.parse(jsonDataDiv);

var table = $('#tableAppend').DataTable({
  orderCellsTop: true,
  pageLength: 25,
  data: jsonData,
  "columns": [{data: "itemcode"}],
  columnDefs: [
    {"className": "dt-center", "targets": "_all"}
  ],
});

})

顺便说一句，我假设 json 在 div 中仅用于试用目的。

【讨论】：

您好，感谢您的回复！我完全尝试了你的代码，它仍然说没有可用的数据。控制台确实打印出 JSON 数组对象，所以我知道数据是正确的。
你检查过codepen链接吗？它对我有用
我做到了。我完全复制了你的代码，它仍然说没有可用的数据。考虑到它在 codepen 中工作，我认为其他东西在干扰它，但我不知道是什么。
你也复制了html吗？你能检查一下codepen中的所有组件吗

【解决方案2】：

您只需更改数据表列分配参数名称jsonData-->数据

"columns": [{data: "itemcode"}],

【讨论】：