javascript - 数据表不加载嵌套对象 Ajax

Question

试图让我的 ajax 加载到数据表中。我想从同一个 ajax 调用加载 2 个表，但我什至无法先加载 1 个。让我们开始一些片段操作...

$(function() {
  $("#tablepress-1").DataTable({
    ajax: {
      url: '/api/?action=getStats',
      dataSrc: 'data',
      "deferRender": true
    },
    "columns": [{
        "instances": "Strategy"
      },
      {
        "instances": "Exchange"
      },
      {
        "instances": "Trades"
      },
      {
        "instances": "PL"
      },
      {
        "instances": "Uptime"
      }
    ]


  })
})

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tablepress-1" class="tablepress tablepress-id-1">
  <caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;"><a href="https://pinebot.com/wp-admin/admin.php?page=tablepress&action=edit&table_id=1">Edit</a></caption>
  <tbody>
    <tr class="row-1">
      <td class="column-1">Strategy</td>
      <td class="column-2">Exchange</td>
      <td class="column-3">Trades</td>
      <td class="column-4">PL</td>
      <td class="column-5">Uptime</td>
    </tr>
  </tbody>
</table>

由于堆栈片段不支持 ajax 数据，我将其粘贴在这里:

{"success":true,"data":{"instances":[{"Strategy":"...","Exchange":"...","Trades":"...","PL":"...","Uptime":"..."}],"trades":[{"Open":"...","Strategy":"...","Exchange":"...","Direction":"...","Size":"...","PL":"...","Close":"...","ID":"..."}]},"meta":{"botOnline":true,"threadCount":0,"balance":0.0028}}

现在我只有我的脚本为每个字段输出 ...。发生的情况是表格标题消失并且没有数据加载到表格中。

我尝试使用数据源设置 fiddle ，但这是我第一次尝试使用回显功能。也许其他人知道该怎么做:https://jsfiddle.net/Trioxin/kjhtn7wm/6/

我无法想象这里出了什么问题。我以为我正确指定了 json 格式，但似乎没有。

Answer 1

1. 关于 jsfiddles 中的跨域 AJAX 源，您可以使用 http://myjson.com

2. 您的“表格标题”消失了，因为它们不是表格标题。它们只是一个 <tbody> DataTables 获取一些数据后将被删除的行。改为这样做:

   <thead>
     <tr class="row-1">
       <th class="column-1">Strategy</th>
       <th class="column-2">Exchange</th>
       <th class="column-3">Trades</th>
       <th class="column-4">PL</th>
       <th class="column-5">Uptime</th>
     </tr>
   </thead>
   

3. 您必须传递对象数组或指向该数组的路径，例如 dataSrc: data.instances .你也可以有 dataSrc: function(data) { return data.data.instances }

4. 您通过 data 定义应将哪个对象属性映射到哪个列像{ data: "Strategy" }这样的选项:

   columns: [
     { data: "Strategy" },
     { data: "Exchange" },
     { data: "Trades" },
     { data: "PL" },
     { data: "Uptime" }
   ]
   

fork fiddle -> https://jsfiddle.net/hfc10sxt/