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.

ScottLenart · Accepted Answer · 2016-05-04 18:05:38Z

3

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

answered May 4, 2016 at 18:05

ScottLenart

1,2101 gold badge13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

markpsmith · Accepted Answer · 2014-07-18 09:25:54Z

1

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=...

answered Jul 18, 2014 at 9:25

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

11 Comments

Daniel Sh. Over a year ago

Thanks Mark. But the call throws a 404 error. I don't get it since the url does exist. Any idea?

markpsmith Over a year ago

Have you tried using the full url instead of just /getData?

Daniel Sh. Over a year ago

same thing, a datatables pop un warning error with this datatables.net/manual/tech-notes/7

markpsmith Over a year ago

can you browse to the url?

Daniel Sh. Over a year ago

Not sure how to answer that. I'm on a node.js/express modular route. This route has a couple of .jade files and an index.js file. Inside that .js file I have all my app.get and app.post, one of them is app.post('/getData', function(req, res){...}); How to browse there?

|

Collectives™ on Stack Overflow

DataTables Loading message not being displayed

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related