Datatables не загружает вложенные объекты Ajax

Question

Попытка заставить мой AJAX загружаться в таблицы данных.Я хочу загрузить 2 таблицы из одного и того же вызова AJAX, но я даже не могу получить 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, но это не так.

Answer 1

1. Относительно междоменных источников AJAX в jsfiddles вы можете использовать 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/