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>