Loading text or icon when data loads.

PareshKumar

Hi, is there any way to add loading icon when data loads in datatable? Because it takes 8 to 10 seconds to load 5000 rows. Help would be appreciated. Thanks.

rf1234

You can use the DT processing indicator. You can hardly see the thing ... so I rolled my own inidcator with a spinner.

First you need to set "processing" to true. Either in your DT definition or in the defaults setting. I have it as a default for all of my tables.

//Data tables default settings
$.extend( true, $.fn.dataTable.defaults, {
    processing: true
} );

Then you can also change the defaults for the processing indicator. Mine is using the font awesome spinner.

$.extend( true, $.fn.dataTable.defaults, {
    "language": {
        "processing": "<span class='fa-stack fa-lg'>\n\
                            <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                       </span>&emsp;Processing ...",
    }
} );

The above code needs to rune BEFORE DT initialization.

I use this version of font awesome:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

In this thread you can see what it looks like and find more information as well:
https://datatables.net/forums/discussion/comment/161898/

Here is an alternative to using the DT processing indicator:
https://datatables.net/forums/discussion/comment/172406/#Comment_172406

I mostly use busyLoad; it is very easy to use. You can just start the full page spinner when opening the page and when all the loading is done close the spinner.

I do this for all of my pages:

$.busyLoadSetup({ fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" });
$.busyLoadFull("show");

And on ajaxStop (i.e. when all Data Tables are loaded) I close it. Works everywhere.

$(document).ajaxStop(function () {
    $.busyLoadFull("hide");
});

PareshKumar

This works!! Thanks @rf1234