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

SriniKSriniK Posts: 3Questions: 1Answers: 0

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

  • SriniKSriniK Posts: 3Questions: 1Answers: 0

    I have formatted the code so that it is readable

    $('#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');
    });
    
  • SriniKSriniK Posts: 3Questions: 1Answers: 0

    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.

This discussion has been closed.