jQuery, DataTables, ajax error handling: get rid of "Processing" message

Question

I am using jQuery DataTables, ajax and Bootstrap in a small project. It is mostly working and I am testing error states. I have setup my html for the DataTables table. There is a table-responsive div surrounding the <table>.

<div id="errorDiv"></div>
    <div id="resultTableDiv" class="table-responsive">
        <table id="resultTable"  class="table table-striped table-bordered table-hover table-condensed" cellspacing="0">
            <thead>
            <tr>
                <th>...</th>
                ...
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>...</th>
                ...
            </tr>
            </tfoot>
        </table>
    </div>
</div>

In the DataTables init I setup the ajax call and specify an error callback function. This "works" in that I can force an error in the server side ajax code and the callback is fired. I can handle the returned error as I want.

My issue is that when the ajax call starts the table body is "replaced" by a Processing message. That's fine except that when ajax reports the error via the callback the processing message is still there and I have yet to figure out how to make it go away via the DataTables methods or API calls.

my error callback looks like

function ajaxError(jqXHR, textStatus, errorThrown) {
    var obj = jQuery.parseJSON(jqXHR.responseText);
    if (obj && obj.Error) {
        $('#errorDiv').html("<p>" + obj.Error + "</p>");
    }
}

I have a "global" variable that holds the DataTables table definition. It is set in the jQuery ready function

var table;
$(function () {
    $('#errorDiv').empty();
    $('#resultTable').show();

    table = $('#resultTable').DataTable({
        paging: false,
        processing: true,
        autoWidth: false,
        ordering: false,
        ajax: {
            url: "ions.cgi",
            dataType: 'json',
            dataSrc: "LIST",
            error: ajaxError
        }, ...

In the error callback I have tried all of the following:

table.clear().draw();    // does nothing
table.fnRedraw();        // says that function does not exist

In this error state how should the Processing message be reset?

Answer 1

The element which shows the processing message gets the id <idOfTable>_processing, so you could hide it using:

$('#resultTable_processing').hide();

This might have changed, and the id could be different, but the concept stands, you can just find out how to identify the element and hide it. DataTables will show it again if it has to.

Also, do you want the processing message showing up in other ocassions? Because you can just make it never appear by using processing: false on the DataTable's options (or just not setting it at all, since it's the default behaviour not to show it).