Remove only blue icon from loading

Remove only blue icon from loading

TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1
edited July 2022 in Free community support

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.

This question has accepted answers - jump to:

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited July 2022

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

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

  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

    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?

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    Answer ✓

    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;
    }
    
  • TheNerdy97TheNerdy97 Posts: 25Questions: 6Answers: 1

    Thanks! This will get me started.

Sign In or Register to comment.