Handle ajax empty response {} table.ajax.reload();

latinunit

I am reloading table data using a modal query form which sends a new request to my ajax endpoint,

Problem: if my new criteria does not produce any data, I get an error in the console and the loading spinner stays spinning forever.

How do I handle an empty object on data tables? to display an alert or activate a modal i.e.

if empty response then {
  $('#notificationModal').show //error message window
or alert('No Data');
{

The response is an empty object {}

 var urlEndpoint = "/sch/subscriptionAPI_v59.jssp" ;
/** datatables **/     
var table= $('#recipients').DataTable({   
        serverSide: false,
        processing:true,
        ajax: {
                url: urlEndpoint,
                data: function (d) {
                let session = sessionStorage.getItem("query")
                    d.cr = session ? $('#created').val() : new Date().getFullYear()+"-03-01";
                    d.rm = $('#rm').val();
                    d.st = $('#superTeam').val();
                    d.ss = $('#status').val();
                    d.it = $('#invType').val();
                    d.oj = operatorJurisdiction;
                },            
                type: 'POST',
                headers: {},
                 error: function (request, status, error) {
                      alert(request.responseText);
                  }                          
               },            

latinunit

Update

I think I solevd it, by sending an error response from my API if the data length is 0 but the loading spinner (processing flag) stays spinning. how do I turn it off? in this scenario

(p

kthorngren

Since Datatalbes expects the ajax data to be in the data object by default and the row data to be in an array you should return this:

{
  data: []
}

Kevin

latinunit

Thanks K, that seems to have done the trick.

 ajax: {
                url: urlEndpoint,
                data: function (d) {
                let session = sessionStorage.getItem("query")
                    d.cr = session ? $('#created').val() : new Date().getFullYear()+"-03-01";
                    d.rm = $('#rm').val();
                    d.st = $('#superTeam').val();
                    d.ss = $('#status').val();
                    d.it = $('#invType').val();
                    d.oj = operatorJurisdiction;
                },            
                type: 'POST',
                headers: {},
                 error: function (request, status, error) {
                      alert(request.responseText);
                  }                          
               },      

where in the ajax can I check for data.length on ajax response so that I can pop up and alert?

maybe something like the following

success: function  (request, status, error) {
   if request data length is > 0 then 
    $("#result").html("Successful");
},

kthorngren

You can use the xhr event or the ajax.dataSrc option.

Kevin

latinunit

Thanks Kevin,

I found the solution with your suggestion

    table.on( 'xhr', function () {
    var json = table.ajax.json();
      if(json.data.length == 0) {
        alert('No data found');
      }
    });