Ajax load, but table don't draw the datas

poisons

I've a simple datatable, I initialise like this:

var table = $('#products-details').DataTable({
    ajax: {
      url: "url.php",
      contentType: "application/json",
      "columns": [
        { "data": "name" } ,
        { "data": "options" },
        { "data": "quantity" } ,
        { "data": "action" }
      ],
      data: function ( d ) {
        d.locationId = $('#fromTransfer').val();
      }
    },
    dom: '<"row"<"col-sm-6"l><"col-sm-6"f>><"table-responsive"t>p',
    order: [[0, 'asc'], [1, 'asc']]
  });

Then on a select change event I call an ajax reload

  $("#fromTransfer").on('change', function () {
    table.ajax.reload();
  });

From the ajax file I've a json response (filled with dummy values)
{"data":{"name":"1","options":"1","quantity":"2","action":"3"}}

but the table don't redraw with new datas.
I already tried adding processing: true and serverSide: true to the datatable initialisation, and also draw, recordsTotal and recordsFiltered to the JSon object but nothing changes

kthorngren

You need to return an array of objects. Instead of this:

{
    "data": {
        "name": "1",
        "options": "1",
        "quantity": "2",
        "action": "3"
    }
}

You need this:

{
    "data": [
      {
        "name": "1",
        "options": "1",
        "quantity": "2",
        "action": "3"
    }
    ]
}

This is described in this section of the Data doc.

Kevin

poisons

Hi Kevin,
thanks for your answer, but the result is anyway empty table.

I've modified the php and now the ajax return this
{"data":[{"name":"1","options":"1","quantity":"2","action":"3"}]}
but the table remain empty

Giovanni

poisons

I have slightly modified the js, adding dataSrc and deleting some quote:

var table = $('#products-details').DataTable({
    ajax: {
      url: 'url.php',
      dataSrc: 'data',
      columns: [
        { data: "name" } ,
        { data: "options" },
        { data: "quantity" } ,
        { data: "action" }
      ],
      data: function ( d ) {
        d.locationId = $('#fromTransfer').val();
      }
    },
    dom: '<"row"<"col-sm-6"l><"col-sm-6"f>><"table-responsive"t>p',
    order: [[0, 'asc'], [1, 'asc']]
  });

Now instead of an empty table I've a popup error, saying the table has Requested unknown parameter '0' for row 0, column 0

Reading the docs it means that the table is expecting something and getting something different.

I cannot see where is the error.
This is what url.php return

{
  "data": [ 
    {
      "name":"1",
      "options":"1",
      "quantity":"2",
      "action":"3"
    }
  ]
}

and this is the html

<table id="products-details" data-page-length="25">
  <thead>
  <tr>
    <th>Name</th>
    <th>Options</th>
    <th>Quantity</th>
    <th>Actions</th>
  </tr>
  </thead>
</table>

poisons

I see now.

columns definition has to be out from ajax call.
Thanks Kevin for helping

This is the right js:

var table = $('#products-details').DataTable({
    ajax: {
      url: 'url.php',
      dataSrc: 'data',
      data: function ( d ) {
        d.locationId = $('#fromTransfer').val();
      }
    },
    columns: [
      { data: "name" } ,
      { data: "options" },
      { data: "quantity" } ,
      { data: "action" }
    ],
    dom: '<"row"<"col-sm-6"l><"col-sm-6"f>><"table-responsive"t>p',
    order: [[0, 'asc'], [1, 'asc']]
  });