时间戳

首页 > 解决方案 > 数据表不加载嵌套对象 Ajax

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

问题描述

试图让我的 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}}

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

我尝试使用数据源设置小提琴，但这是我第一次尝试使用回显功能。也许其他人知道如何做到这一点：https ://jsfiddle.net/Trioxin/kjhtn7wm/6/

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

标签： javascriptjqueryajaxdatatables

解决方案

  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" }
]

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

推荐阅读