JQuery, DataTables, ajax error handling: get rid of the "Processing" message
I am using jQuery DataTables, ajax and Bootstrap in a small project. It works mostly and I am testing for error states. I have set my html for DataTables. There is a table-responsive
div surrounding <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 DataTables initialization, I set up the ajax call and set the callback function error
. This "works" in that I can force a server side ajax error and the callback gets fired. I can handle the returned error however I want.
My problem is when the ajax call is triggered, the table body is "replaced" with the message Processing
. This is fine, except that when ajax reports an error using a callback, the processing message still exists and I have yet to figure out how to get it to go through DataTables methods or API calls.
my callback refers to
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 contains the definition of the DataTables. It is set in 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've 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
reset message be ?
source to share
The element that shows the processing message gets an ID <idOfTable>_processing
, so you can hide it using:
$('#resultTable_processing').hide();
This might change and the ID might be different, but the concept is worth it, you can just learn how to identify the element and hide it. DataTables will display it again if needed.
Also, do you want the processing message to appear in other cases? Because you can just make it never appear by using processing: false
the DataTable in the parameters (or just not setting it at all, since this behavior doesn't display it by default).
source to share