Datatables Not Loading Nested Objects Ajax

Question

Trying to get my ajax to load into data tables. I want to load 2 tables from the same ajax call but I can't even get 1 to load first. Let's get some snippet action going...

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

Since stack snippets don't support ajax data, I'll paste it here:

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

Right now I just have my script outputting ... for each field. What happens is that the table headings disappear and no data ever gets loaded into the table.

I tried setting up a fiddle with the data source but it's my first time trying to use the echo feature. Maybe someone else knows how to do that: https://jsfiddle.net/Trioxin/kjhtn7wm/6/

I can't imagine what's wrong here. I thought I specified the json format properly but it appears not.

It is not so clear what data exactly you want to use. You cannot combine instances and trades since they have different fields / prop names; and since all your data contain "..." it is not clear if it is possible to map parts of trades objects into corresponding instances objects. — davidkonrad
– davidkonrad, Commented Sep 12, 2018 at 19:18

davidkonrad · Accepted Answer · 2018-09-12 19:41:10Z

1

Regarding cross domain AJAX sources in jsfiddles you can use http://myjson.com

Your "table headings" disappear because they are not table headings. They are just a <tbody> row that will be removed as soon DataTables get some data. Do this instead:

<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>

You must either pass an array of objects or point to the path of that array, like dataSrc: data.instances. You could also have dataSrc: function(data) { return data.data.instances }

You define which object property that should be mapped into which column through the data option like { data: "Strategy" }:

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

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

answered Sep 12, 2018 at 19:41

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xendi Over a year ago

Thanks. Is it possible to update 2 datatables with 1 ajax call? I can't seem to get it working. About to pose the question.

xendi Over a year ago

here's that: stackoverflow.com/questions/52303556/…

Collectives™ on Stack Overflow

Datatables Not Loading Nested Objects Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related