代码之家 › 专栏 › 技术社区 › xendi

未加载嵌套对象的数据表

datatables ajax jquery javascript

xendi · 技术社区 · 6 年前

$(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}}

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

我试着设置一个数据源,但这是我第一次尝试使用echo特性。也许其他人知道怎么做: https://jsfiddle.net/Trioxin/kjhtn7wm/6/

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

1 回复 | 直到 6 年前

davidkonrad 6 年前

http://myjson.com

你的“表格标题”消失了,因为它们不是表格标题。他们只是一个 <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>

dataSrc: data.instances dataSrc: function(data) { return data.data.instances }

您可以通过 data 类似选项 { data: "Strategy" }

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

叉形小提琴-> https://jsfiddle.net/hfc10sxt/