Remove only blue icon from loading

TheNerdy97

https://jsfiddle.net/TheNerdy97/b9kz1wh6/5/

The loading screen with the blue icon.

I want to keep the processing option but remove only the blue icon, as I want to add custom massages without the blue icon.

P.S: I have serverSide enabled only on the real case and not on the test case.

rf1234

That is no longer possible with the latest Data Tables release. I just tested it myself: My FA icon is ignored and the built-in Data Tables spinner is shown.
https://datatables.net/reference/option/language.processing

Please note that prior to DataTables 1.12 the default for this parameter was Processing.... The processing indicator in 1.12 has been updated to use a CSS animation to indicate that a loading action is taking place. A text string can still be added if needed.

Of course you can still fiddle with this after dt initialization by removing the CSS etc. Good luck.

allan

Sure it can be done . Just add this CSS to your page:

div.dataTables_processing div {
  display: none;
}

Example: http://live.datatables.net/gajejise/1/edit .

Allan

TheNerdy97

Hi Allan! your link shows this error

Not Found
The requested URL was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

kthorngren

The link does work. Try clearing your browser's cache or use a different browser.

I added the CSS to your test case and it works:
https://jsfiddle.net/jd2s0yr9/

You might need to load Font Awesome library to show their spinner.

Kevin

TheNerdy97

Thanks, Allan, that's what I needed!
@kthorngren I tried clearing browser cache and used two different browsers, nothing worked, page still Not Found

TheNerdy97

I have another Q, is it possible to show the loading indicator when sorting in serverSide mode?

rf1234

Yes, that is the default behavior - unless you turned it off using Allan's CSS above.

TheNerdy97

@rf1234 Even before I used Allan's CSS, when I sort no loading indicator appear.

kthorngren

It works in this example. Can you post a link to your page or a test case showing the problem?

Kevin

TheNerdy97

nvm, it works but it was too fast and because I have child row, it appears lower on the DT, is it possible to make it show under the column's title directly?

rf1234

Yes, with CSS everything is possible - but not using the API.

This is the CSS I use to keep the processing indicator where I want it to be. This is a lot about experimenting ...

.dataTables_wrapper .dataTables_processing {
    position: fixed !important;
    top: 50% !important;
}

TheNerdy97

Thanks! This will get me started.

m75sa

this seems to work. But if i have a setinterval ajax reload... and I want to show the preload only the first time that the table is loaded?

So let's say:
- first time that i open the page, i see the table with preloading
- then i have: setInterval (dataTable.ajax.reload, 10000);
- so i don't want to see every time the table is reloaded, the preload icon

possible?

rf1234

You could hide the indicator

$('.dataTables_processing).css('display', 'none');

Or - better - use the api to turn it off after the first run.
https://datatables.net/reference/api/processing()

m75sa

this will hide also the first time the preload... i need to see the first time the preload, then not more when there is the setinterval

rf1234

this will hide also the first time the preload

Well, only if you execute the code prior to your initial load. You will need an event handler.

Take a look at the data tables events please:
https://datatables.net/reference/event/

One way could be to use the "init" event and hide the indicator after a couple of seconds so that it doesn't reappear later

m75sa

thanks, this seems to be a good idea.

rf1234

This could be a solution. Haven't tested it.

table
    .on('init', function (e, settings, json) {
        setTimeout(function () {
            table.processing(false);   
        }, 9500);
        setInterval(function () {
            table.ajax.reload();
        }, 10000);
    });