processing indicator not showing

kennovation

I'm using datatables 1.10.18 with MDBootstrap 4.8.4 and can't get the processing indicator to show.

I have a search operation that takes about a second or two and I expected to see the processing indicator.

The relevant DataTable() options are:

dom: "fr<'ExportButton'B>ti",
processing: true
language: {
     processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>Processing...'
},

Things I've tried include moving the 'r' in the dom spec to different locations, changing the processing message to simple text, setting it to

Processing

and several other combinations and lots of unsuccessful googling.

Is there maybe some CSS I need to adjust?

I'm stumped. Any help would be greatly appreciated!

rf1234

Just tried it myself with your code and it worked fine both in the German and English version. Thanks for this!

This is my code based on your example:

//Data tables language settings
if (lang === 'de') {    
    $.extend( true, $.fn.dataTable.defaults, {
        "language": {
            "decimal": ",",
            "thousands": ".",
            "info": "Anzeige _START_ bis _END_ von _TOTAL_ Einträgen",
            "infoEmpty": "Keine Einträge",
            "infoPostFix": "",
            "infoFiltered": "(gefiltert aus insgesamt _MAX_ Einträgen)",
            "loadingRecords": "Bitte warten Sie - Daten werden geladen ...",
            "lengthMenu": "Anzeigen von _MENU_ Einträgen",
            "paginate": {
                "first": "Erste",
                "last": "Letzte",
                "next": "Nächste",
                "previous": "Zurück"
            },
            "processing": "<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>Verarbeitung läuft...",
            "search": "Suche:",
            "searchPlaceholder": "Suchbegriff",
            "zeroRecords": "Keine Daten! Bitte ändern Sie Ihren Suchbegriff.",
            "emptyTable": "Keine Daten vorhanden",
            "aria": {
                "sortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                "sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
            },
            //only works for built-in buttons, not for custom buttons
            "buttons": {
                "create": "Neu",
                "edit": "Ändern",
                "remove": "Löschen",
                "copy": "Kopieren",
                "csv": "CSV-Datei",
                "excel": "Excel-Tabelle",
                "pdf": "PDF-Dokument",
                "print": "Drucken",
                "colvis": "Spalten Auswahl",
                "collection": "Auswahl",
                "upload": "Datei auswählen....",
                "selectNone": "Auswahl aufheben"
            },
            "select": {
                "rows": {
                    _: '%d Zeilen ausgewählt',
                    0: 'Zeile anklicken um auszuwählen',
                    1: 'Eine Zeile ausgewählt'
                }
            }
        }            
    } );        
} else {
    $.extend( true, $.fn.dataTable.defaults, {
        "language": {
            "processing": "<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i>Processing...",
            "select": {
                "rows": {
                    _: '%d rows selected',
                    0: 'Click row to select',
                    1: '1 row selected'
                }
            }
        }
    } );
}

The processing indicator is shown while initially loading the data table. I am not sure whether it will ever be shown while conducting a search operation though! @Colin, can you give us a hint please.

rf1234

Made it a little nicer so that the text is centered vertically with the fa spinner:

"processing": "<span class='fa-stack fa-lg'>\n\
                    <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
               </span>&nbsp;&nbsp;&nbsp;&nbsp;Processing ...",

Found this here: https://editor.datatables.net/reference/event/processing

If you do your search client side (the default) and don't use server side processing you are not going to see a processing indicator. This might be the reason for your issue.

rf1234

Update: Just tried this on one of my server side search pages: No processing indicator even though the search string gets submitted to the server ...

rf1234

@colin, @allan,

why is the processing inidcator not showing even with server side search? Is it only showing upon loading the data table?

allan

Use processing. The link you gave above was to the Editor processing option.

If that doesn't resolve it for you, please link to the page so I can take a look.

Thanks,
Allan

rf1234

No this is not about the Editor processing option which I use as well when uploading documents. But I made a mistake: In the respective server side search page I had overwritten my $.fn.dataTable.defaults ("processing: true") with "processing: false".

Turned it back on and it also worked for server side search, not only the loading of the data table.

Of course it doesn't work for client side search. So if that was @kennovation 's problem then there is not solution for this, I guess.

rf1234

@allan, now I see what you mean: I got the wrong link from the docs. So your link is right.
Just tested with a large table client side: Processing indicator went on when ordering the table. It didn't go on when searching - probably because the search was still very fast in spite of the high number of records.

Is there a threshold in terms of milliseconds when the indicator is shown?

allan

No - with client-side processing the search is actually performed synchronously so there is no processing indicator. For the sort it is async if the user clicks to sort. It is synchronous for the order() method!

With server-side processing it is always async for every action so it will always appear.

It might be possible to move some of the processing such as search into a web worker, but that's not currently on our roadmap.

Allan

rf1234

Wow! Many thanks, Allan.
When I started coding there was no difference between client and server. Just dumb terminals ...
Why was this abandoned? The main reason was bandwidth limitations. These will soon be resolved. Looking forward to the abolition of the client server paradigm ...