I'm using the Datatables plugin to get table data from a server using the ajax Property and transform it using the dataSrc property. My datatables definition:
var my_table = $('#my_table').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/my/url",
"type": "POST",
"dataSrc": function(json) {
console.log('json', json);
return format_my_table_data(json.data);
}
},
"deferLoading": found_rows,
"data": initial_my_table_data,
"ordering": true,
"order": [[1, "desc"]],
"lengthMenu": [
[25, 50, 100],
[25, 50, 100]
],
"columns": my_table_columns
});
The initial load works fine, and ordering columns and searching works sometimes but mostly I see the ajax call return successfully with valid json (I verified using jsonlint.com) and the table is stuck at "Processing..." sometimes or the table just doesn't change at all.
Json from the server:
{"recordsTotal":379,"recordsFiltered":378,"draw":25,"data":[{...}]}
When inspecting the network in the console i can see the ajax request being sent and a response that is similar each time (with a total time between 600ms and 1600ms depending on the number of rows returned) but my console.log inside the dataSrc function isn't called and no javascript errors in the console. What gives?