Question

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

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>

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

Answer 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中用于试用。

Answer 2

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

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

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

2 个答案: