How to redraw the data table if ajax call fails with error
How to redraw the data table if ajax call fails with error
I am trying to implement SQL execution kind of interface. Where one can submit a query and see the response in a Datatable. Query submission is an ajax api call. If query is wrong, server responds back empty.
In this case, I see error message as "TypeError: Cannot read property 'aDataSort' of undefined" from Data table. On passing correct query in subsequent request, I observer this error : " TypeError: Cannot read property 'parentNode' of null".
I tried resetting the Data table on submission of every ajax request.
Here is the code below
function getQueryResult(){
$.fn.dataTable.ext.errMode = 'throw';
var sqlStatement = $("#reportquery").val();
if (sqlStatement !=""){
isQueryValid = validateQuery(sqlStatement);
if (!isQueryValid){
alert("Input valid Query. Only select query is supported");
return 0;
}
sqlStatement = prepareQueryString(sqlStatement);
var reqData = {'sqlStatement':sqlStatement, 'action':'execQuery', 'oddColor': oddColor, 'evenColor': evenColor, 'oddHighlight': oddHighlight, 'evenHighlight': evenHighlight};
var url = "newcreatereport";
var reqMethod = "POST";
var resp = doAjaxRequest(url, reqMethod, reqData, $(this));
$('#data-table-css').html(resp.tableCss)
// Check if the Datatable exist. If exist clear the table content
if ( $.fn.DataTable.isDataTable('#data-table-report')) {
$('#data-table-report').DataTable().destroy();
$('#data-table-report').html('');
}
$('#data-table-report').DataTable( {
"bDestroy": true,
"colReorder": true,
"columns": resp.queryColumns,
"scrollX": true,
"scrollY": '50vh',
"bAutoWidth": false,
"scrollCollapse": true,
"ajax": {
"type": "POST",
"url": "newcreatereport",
"data": reqData,
"error": function(xhr, status, error){
alert(xhr.responseText);
},
"dataSrc": function(json) {
return json.queryData;
}
}
}).draw();
}
}
Could someone help me in solving this issue. Appreciate your help.