DataTables Loading message not being displayed

Question

I had no luck with other so answers on the matter so here I am. I populate the table with some MySQL data, it's never drawn until data is ready to show, and since the data is taking its time I'd like a message to pop. Here's the full code.

function getData(startDate, endDate) {  
    $.ajax({
        url: "/getData",
        type: 'post',   
        contentType: "application/json",
        processData: false,         
        dataType: "json",       
        data : JSON.stringify({ startDate : startDate, endDate : endDate }),            
        complete: function(data){               
            $("#offline").dataTable({                                           
                "aaData": data.responseJSON[0],                     
                "bProcessing": true,                        
                "aoColumns": [                              
                    { "sWidth": "25%","sTitle": "Myfield1", "mDataProp": "field1"},
                    { "sWidth": "25%","sTitle": "Myfield2", "mDataProp": "field2"},
                    { "sWidth": "25%","sTitle": "Myfield3", "mDataProp": "field3"},
                    { "sWidth": "25%","sTitle": "Myfield4", "mDataProp": "field4",
                        "mRender": function ( data, type, full ) {                                               
                                    return data + ' %';
                                } 
                            }
                ],              
                "oLanguage": {
                    "sUrl": "/javascripts/i18n/dataTables.modified.json"
                },                  
                "aaSorting": [[ 0, "desc" ]],
                "bSort": false,
                "bInfo" : false,                                
                "bPaginate": false,
                "bFilter": false
            });
        }
    });
}

For what I've read I need to set bProcessing to true and to do something with the sDom parameter but I wasn't able to make it work.

Thanks.

Answer 1

One more thing of note...You must include the dom code "r" to the datatables creation script...

dom: "r",
processing: true,

https://datatables.net/examples/basic_init/dom.html

Answer 2

I think the processing message isn't showing because by the time you initialise the datatable(in the ajax 'complete' callback), the data is already loaded so there's no need to show the processing message. If you init the datatable first and use sAjaxSource to load the data it will work as you expect:

var oTable = $("#offline").dataTable({                                           
    'bServerSide': true,
    'fnServerParams': function (aoData) {
       aoData.push({ "name": "startDate", "value": $('#startDate').val() });
       aoData.push({ "name": "endDate", "value": $('#endDate').val() });
     },
     'sAjaxSource': "/getData",
    'bProcessing': true,                     
    "aoColumns": [                              
        { "sWidth": "25%","sTitle": "Myfield1", "mDataProp": "field1"},
        { "sWidth": "25%","sTitle": "Myfield2", "mDataProp": "field2"},
        { "sWidth": "25%","sTitle": "Myfield3", "mDataProp": "field3"},
        { "sWidth": "25%","sTitle": "Myfield4", "mDataProp": "field4",
            "mRender": function ( data, type, full ) {                                               
                        return data + ' %';
                    } 
                }
    ],              
    "oLanguage": {
        "sUrl": "/javascripts/i18n/dataTables.modified.json"
    },                  
    "aaSorting": [[ 0, "desc" ]],
    "bSort": false,
    "bInfo" : false,                                
    "bPaginate": false,
    "bFilter": false
});

Note that I'm passing your start & end date params using fnServerParams, but you could also add them on to the end of the url: /getData?startDate=...