使用 Datatables 从 JSON 数据构建 HTML 中的动态表

Question

我需要使用 datatables 插件基于 php 脚本返回的 json 构建一个表。我的代码如下：

HTML：

<table id="doentes" class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Id</th>
      <th>Pedidos (Canal 1)</th>
      <th>Pedidos (Canal 2)</th>
      <th>Pedidos (Canal 3)</th>
      <th>Preço</th>
      <th>Frete</th>
      <th>Prazo</th>
      <th>Pageviews</th>
      <th>Abandonos</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td>Id</td>
      <td>Pedidos (Canal 1)</td>
      <td>Pedidos (Canal 2)</td>
      <td>Pedidos (Canal 3)</td>
      <td>Preço</td>
      <td>Frete</td>
      <td>Prazo</td>
      <td>Pageviews</td>
      <td>Abandonos</td> 
     </tr>
  </tbody>
</table>

Javascript：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>     
<script>
  $(document).ready(function() {
      $('#doentes').DataTable({
        "ajax" :  "functions/diagnosticoGeral.php",
        "columns" : [ 
          { 
              "data" : "id"
          }, {
            "data" : "pedidos0"
          }, {
            "data" : "pedidos1"
          }, {
            "data" : "pedidos2"
          }, {
            "data" : "preco"
          }, {
            "data" : "frete"
          }, {
            "data" : "prazo"
          }, {
            "data" : "pageviews"
          }, {
            "data" : "abandonos"
          }]
      });
  });

  </script>

php json 输出示例：

[
{ 
"id": "159830",
"pedidos0": "Outros Canais: 0% da queda, com variação de 100% em relação aos  
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de -20% em relação aos últimos 
ciclos",
"pedidos2": "MadeiraMadeira: 0% da queda, com variação de -23% em relação 
aos últimos ciclos",
"preco": "Sem variação significativa",
"pageviews": "-9 % em relação aos últimos ciclos",
"frete": [
"-8 % em relação aos últimos ciclos",
"SP: 9% em relação aos últimos ciclos"
],
"prazo": [
"14% em relação aos últimos ciclos",
"SP: 10% em relação aos últimos ciclos"
],
"abandonos": "-4 % em relação aos últimos ciclos"
},
{
"id": "159831",
"pedidos0": "Outros Canais: 0% da queda, com variação de 0% em relação aos 
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de 0% em relação aos últimos 
ciclos",
"pedidos2": "Walmart: 0% da queda, com variação de -25% em relação aos 
últimos ciclos",
"preco": "Sem variação significativa",
"pageviews": "-31 % em relação aos últimos ciclos",
"frete": [
"-100 % em relação aos últimos ciclos",
"SP: -100 % em relação aos últimos ciclos"
],
"prazo": [
"-100 % em relação aos últimos ciclos",
"SP: -100 % em relação aos últimos ciclos"
],
"abandonos": "-21 % em relação aos últimos ciclos"
},
{
"id": "161138",
"pedidos0": "Outros Canais: 0% da queda, com variação de 0% em relação aos 
últimos ciclos",
"pedidos1": "CNova: 0% da queda, com variação de 0% em relação aos últimos 
ciclos",
"pedidos2": "B2W: 0% da queda, com variação de -57% em relação aos últimos 
ciclos",
"preco": "12% em relação aos últimos ciclos",
"pageviews": "-55 % em relação aos últimos ciclos",
"frete": [
"23% em relação aos últimos ciclos",
"SP: 19% em relação aos últimos ciclos"
],
"prazo": [
"-3 % em relação aos últimos ciclos",
"SP: -14 % em relação aos últimos ciclos"
],
"abandonos": "-68 % em relação aos últimos ciclos"
}
]

它只返回空表，来自浏览器的错误：

jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined
    at jquery.dataTables.min.js:48
    at i (jquery.dataTables.min.js:35)
    at Object.success (jquery.dataTables.min.js:35)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

我尝试了一些示例，但我对 javascript 的了解有限。我也没有在这里找到任何适合我的问题的问题。任何指导将不胜感激。

Answer 1

您的 JSON 响应中没有定义“数据”。你应该...

{
  "data": [
    { 
        "id": "159830"
        "pedidos0": "...",
        "pedidos1": "...",
        "pedidos2": "...",
        "preco": "Sem variação significativa",
        "pageviews": "-9 % em relação aos últimos ciclos",
        "frete": [
            "-8 % em relação aos últimos ciclos",
            "SP: 9% em relação aos últimos ciclos"
        ],
        "prazo": [
            "14% em relação aos últimos ciclos",
            "SP: 10% em relação aos últimos ciclos"
        ],
        "abandonos": "-4 % em relação aos últimos ciclos"
    },
    {
        "id": "159831",
        "pedidos0": "...",
        "pedidos1": "...",
        "pedidos2": "...",
        "preco": "Sem variação significativa",
        "pageviews": "-31 % em relação aos últimos ciclos",
        "frete": [
            "-100 % em relação aos últimos ciclos",
            "SP: -100 % em relação aos últimos ciclos"
        ],
        "prazo": [
            "-100 % em relação aos últimos ciclos",
            "SP: -100 % em relação aos últimos ciclos"
        ],
        "abandonos": "-21 % em relação aos últimos ciclos"
    },
    {...},
    {...},
  ]
}

希望对你有帮助