Issue with Server-side processing: table is not redrawn after getting data using AJAX
Issue with Server-side processing: table is not redrawn after getting data using AJAX
I am using datatables for the first time and ran into the following issue. I am using DataTables 1.10.2 and Jquery 1.11.1. I have configured datatables to use the AJAX datasource. The first time the page loads, everything works fine, AJAX request is made and response is received and the table is updated. Now, when I try to sort a column, an AJAX request is made and response is received but the table is not updated, instead it shows the 'Processing' message. Below is the code that I am using
$('#mytable').dataTable({
processing : true,
serverSide : true,
stateSave : true,
ajax : {
url: dataUrl,
type: 'POST'
},
columns : [
{ "data": "number" },
{ "data": "type" },
{ "data": "name" },
{ "data": "date" }
],
drawCallback : function( settings ) {
alert( 'DataTables has redrawn the table' );
}
});
$('#mytable').on( 'draw.dt', function () {
console.log( 'Redraw occurred at: '+new Date().getTime() );
});
$('#mytable').on('xhr.dt', function ( e, settings, json ) {
console.log('ajax call completed');
});
Log output during page load
ajax call completed
Redraw occurred at: 1408547914029
Alert message is also displayed, table shows the result from AJAX.
Log ouput on sorting
ajax call completed
Then the table just shows 'Processing' message and nothing happens.
Any help is greatly appreciated.
Answers
I have formatted the code so that it is readable
Never mind, I figured out the issue. I was not sending proper draw count from the server. Hence it was preventing it to display the new data.