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?

vcanales · Accepted Answer · 2017-08-01 15:31:32Z

15

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).

edited Aug 1, 2017 at 15:31

answered Jul 23, 2015 at 17:33

vcanales

1,82816 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

7 Reeds Over a year ago

Hmm, I assumed there would be an API call that I was missing. I do see the named processing div but hiding it seems a bit hacky. I'm not saying it is not the answer just that it feels inelegant when there is all that other API functionality. However, it works and thank you

vcanales Over a year ago

It is a bit hacky but the alternative offers no benefit and is a plugin. Here you can read an explanation on why it remains open.

Mārtiņš Radiņš Over a year ago

This works in DataTables 1.10.11. The element id still consists of [table-name]_processing

raza9798 Over a year ago

processing: false do the magic

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related