Is it possible to keep Datatables in "processing" mode until the first draw() call?

BillyBBone

Hi,

I have two datatables that I am using in a single page app. I create via JavaScript, by binding a DataTable() instance to a jQuery selector. Later in the same script that instantiates these tables, I fetch some content from a backend server via an AJAX call, then do some post-processing and triage of the JSON. Depending on each record type, I'll add a row to one or the other DataTable instance.

After all of the work of post-processing the JSON has taken place, I call draw() on each table.

This design works well, but because the post-processing step takes a bit of time, it can result in both tables appearing empty for a few seconds before the data suddenly populates in each table.

I would like to add a loading indicator to both tables. I am trying to do that by setting the processing: true option, but it seems that the processing div is only visible for a brief instant when both tables are being instantiated. I would like to somehow keep the processing div visible from the time the tables are instantiated all the way until the tables are rendered with the final draw() call in my post-processing code.

Is this possible? I haven't found the combination of options needed to accomplish this.

Thanks in advance!

BillyBBone

I've found a way to do this, and I want to answer my own question, in the hopes that it might help others who are facing a similar design challenge.

I got the processing div to stay visible during the loading of data by doing the following:

1. I created a new Deferred instance at the top of my function: var tableDataDeferred = $.Deferred()
2. I added the following properties to the instantiation of the DataTable: { processing: true, ajax: function (data, callback) { tableDataDeferred.done(callback); } }. This attaches the AJAX loading callback as the final step of my deferred object. The callback function only gets called when the tableDataDeferred promise gets resolved, and passes its data on to the callback() function.
3. In my post-processing function, rather than calling row.add() on each record as it is sorted into one table or the other, I simply push it on to an array, tableDataRows.push( newRow ).
4. Finally, when I've collected all of the data for a certain table, I close the loop by resolving the promise, which passes the data on to the Datatable's AJAX callback function, tableDataDeferred.resolve({data: tableData}).

Works like a charm!