DataTables show "Processing..." label when dynamically fnAddData

Question

I have a function to dynamically add data into the DataTables. Here is the function.

function fnClickAddRow() {
    for (i=0; i<10000; i++) {
        $('#example').dataTable().fnAddData( [
         giCount+".1",
         giCount+".2",
         giCount+".3",
         giCount+".4" ]
        );
    }
}

This function will dynamically append into my #example datatable, but the screen looks hanging during the manipulation, is there a way to show the loading / processing sign using the "processing": true,

Answer 1

There is no function to trigger display of "Processing" message through API, however there is a workaround.

You need to enable processing indicator with bProcessing: true (for DataTables 1.9) or processing: true (for DataTables 1.10).

To show processing indicator for table with id example:

$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).show();

To hide processing indicator for table with id example:

$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).hide();

Another thing worth mentioning is that for some reason processing indicator wasn't displayed until I added setTimeout with 100ms delay.

On the side note, for performance you need to specify false as a second parameter to fnAddData() to indicate that no re-draw is required. Once you're finished adding the rows, you can call fnDraw() to redraw the table, see this jsFiddle.

You can improve performance even further if you put the data first into an array and then call fnAddData() once.

See this jsFiddle for code and demonstration.

Answer 2

There now appears to be a processing() plugin that permits you to do this via API.

Once the plugin is installed, this can be invoked as (for example): table.processing([true/false]);