'Processing indicator' as a table row

Yani

Is it possible to hide all the rows when the table is processing during a serverside search?
Preferably showing a message in the table with the processing text? Just like the one that is shown when no rows are found?

colin

Hi @Yani,

I think you could use events to get that effect. You could do something in the preXhr to show your text, then clear it in the xhr (which is called after the Ajax completes). That should do the trick,

Cheers,

Colin

allan

You could also use CSS to modify the div.dataTables_processing element if you want to just place the processing message on top of the existing table.

Allan

Yani

This is what I've been using since I started the thread:

// Show a nice message when fetching DataTables ajax data (another event that might be interesting is 'preInit.dt')
$('body').on('preXhr.dt', function (e, ctx) {
    $('#' + ctx.sTableId + ' tbody tr').remove();
    $('#' + ctx.sTableId + ' tbody').append($(
        '<tr><td valign="top" colspan="' + ctx.aoColumns.length + '" class="dataTables_empty">' + ctx.oLanguage.sProcessing + '</td></tr>'
    ));
});

It puts the processing message as a single row in the table and removes the need for the processing DOM element.

allan

That's a neat little trick - thanks for sharing it with us. It would cause a reflow of the document since it would increase the height of the table, but I can see how that would be okay in some cases.

Allan

Yani

Glad to share. What do you mean with increasing the height tho? It removes all rows first, then adds a single row and when the ajax call returns the row is removed again and the new data is loaded.