FEATURE REQUEST: The ability to change the loader animation

SickPuP

In 2.x the loader animation is fixed to the 3 side-by-side dots pulsing. You can set the processing text to appear above the animation but you cannot actually change the animation. In 1.x the processing text controlled the entire loading display so the user could provide HTML or their own loader animation.

Proposal is to make language.processing -> language.loadingText
Add new property language.loadingAnimation which is a string that can override the animation but not the text.

For example, my company wants to use the a FontAwesome spinner icon.

rf1234

For example, my company wants to use the a FontAwesome spinner icon.

I am using that too. Not sure whether this works in the latest DT version, but it should.

$.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 ...",
...

I am using DT 1.11.5.
This: https://datatables.net/reference/option/language.processing
says that CSS was added in DT 1.12. So you might need to "overwrite" that CSS ...

Allan added a comment if you scroll down the linked page above. You might be able to hide the new animation. Not sure whether this will hide the entire thing or just the animation.

allan

Still perfectly possible with DataTables 2. Use this CSS to hide the default loading animation:

div.dt-processing > div {
  display: none;
}

And then use language.processing to set the HTML needed for the FontAwesome icon.

Here is a little example.

Allan

SickPuP

I tried the styling but it kept being reset after the panel popped up. Maybe try it using Bootstrap 3 styling with Ajax data load and serverSide processing. I ended up using a small JS block to add the d-none class to the inner divs. I will dig a little more.

A setting to turn this off or replace it would still be good in the future rather than having to use custom styling.