jQuery datatable functionality inoperable

Viewed 63

I've been working with Datatables for a while, but apparently, I haven't been using them the right way.

In the past, I would start my datatable using $.post, as follows:

$(document).ready(function() {
  $.post('process/recordTables.php', function(data)
  {
    var table = $('#example1').DataTables();
    table.clear();
    var obj = JSON.parse(data);
    obj.forEach(function(item)
    {
      table.row.add([item.column1, item.column2, //and so on]);
    });
    table.draw();
  });
});

The above code works. My datatable prints the data I need. Within the obj.forEach, I can set columns with href tags and other features, if necessary.

But, if I want to be able to reload the Datatable on set intervals, I cannot use the above method. It has to be using the "ajax" method.

After a few trial and errors, using the code below, I was able to print out the "correct" form (and use) of the jQuery Datatables:

$(document).ready(function() 
{
  $('#example1').DataTable({
    "processing": true,
    "serverSide": true, 
    "ajax": {
      "url": "process/recordTables.php", // same url as the above code
      "type": "POST",
      "dataSrc": ''
    },
    "columns": [
      { "data": "" },
      { "data": "column1" },
      { "data": "column2" },
      { "data": "column3" },
      // and so on
    ],
    "iDisplayLength": 25,
    "order": [[ 3, "desc" ]],
    "scrollY": 550,
    "scrollX": true,
    "bDestroy": true,
    "stateSave": true,  
     // few others that don't seem to affect functionality
  });
});

Using the code immediately above, I was able to display the same data using the $.post method.

However...none of the functionality works. The sorting doesn't work. The pagination, the search filter, the data info at the bottom of the table displays "0 out of 0 entries". Nothing works.

What am I missing that will fix this problem? I am perplexed.

Edit

Here is the HTML table:

<table id="example1" class="table table-bordered table-hover table-condensed">
<thead>
  <tr>
    <th></th>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    // and so on
  </tr>
</thead>
<tbody>
</tbody>
</table>
1 Answers
Related