DataTables show the label "Processing ..." when dynamically fnAddData
I have a function to add data to DataTables dynamically. 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 be dynamically added to my #example file , but the screen appears to be hanging during manipulation, is there a way to show the loading / processing sign using "processing": true,
source to share
There is no function to trigger the display of the "Processing" message through the API, however there is a workaround.
You need to enable the processing indicator with bProcessing: true
(for DataTables 1.9) or processing: true
(for DataTables 1.10).
To show an indicator of processing a table with an ID example
:
$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).show();
To hide the processing indicator for a table with an ID example
:
$('.dataTables_processing', $('#example').closest('.dataTables_wrapper')).hide();
Another thing worth mentioning is that, for some reason, the processing indicator was not shown until I added setTimeout
with a 100ms delay.
On the other hand, for performance, you need to specify false
as a second parameter fnAddData()
to indicate that no re-draw is required. When you're done adding rows, you can call fnDraw()
to redraw the table, see this jsFiddle .
You can improve performance even more by putting the data into an array first and then calling it fnAddData()
once.
See this jsFiddle for code and demo.
source to share
Now comes the process () plugin that allows you to do this through the API.
Once the plugin is installed, it can be called like (for example): table.processing([true/false]);
source to share