How to check if the ajax call for jQuery DataTable has returned data

Question

I am trying to load the jQuery DataTable from an AJAX call as in the code below. However I need to know if there is a callback for the DataTable to check if the AJAX call returned successfully or failed before the table is loaded.

$(function() {
  $('#data-table').DataTable({
    destroy: true,
    responsive: true,
    serverSide: false,
    autoWidth: false,
    paging: true,
    filter: true,
    searching: true,
    stateSave: true,
    scrollX: true,
    lengthMenu: [5, 10, 25, 50, 75, 100],
    ajax: {
      url: 'https://jsonplaceholder.typicode.com/todos',
      type: 'GET',
      dataSrc: ''
    },
    columns: [{
      title: 'Zone',
      data: 'LastKnownZone',
    }, {
      title: 'Hiérarchie Map',
      data: 'MapInfo.mapHierarchyString',
    }, {
      title: 'Addresse MAC',
      data: 'macAddress',
    }],
    initComplete: function(json) {
      let returned_data = json;
      //..Do something with data returned
    }
  });
});

Appreciate any help.

Razi · Accepted Answer · 2019-10-10 22:14:59Z

3

Just adding something to @Fawaz Ibrahim's answer, it's also better to add error option in Ajax call in order to check if you face any error or problem , because in case of error, dataSrc callback won't run, so you won't have any successful returned data.

ajax: {
  ...
  dataSrc: function ( receivedData ) {
    console.log('The data has arrived'); // Here you can know that the data has been received
    return receivedData;
  },  
 error: function (xhr, error, thrown) {
     console.log('here you can track the error');
  }
}

answered Oct 10, 2019 at 22:14

Razi

1811 silver badge4 bronze badges

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

3 Comments

Kenzo Over a year ago

Appreciate mate

Kenzo Over a year ago

In your code of error handling did you meand error: function(xhr, status, errorThrown){...} ?

leole Over a year ago

Thanks for this answer. This helped me very much. The only thing that I had to add was the name of my internal (Java-/JSON-) List in order to get displayed: return receivedData.listFromJson

Fawaz Ibrahim · Accepted Answer · 2019-10-10 20:04:00Z

2

As it is mentioned on their official site:

For completeness of our Ajax loading discussion, it is worth stating that at this time DataTables unfortunately does not support configuration via Ajax. This is something that will be reviewed in future

But you can use the idea of datasrc, like this:

$(function() {
  $('#data-table').DataTable({
    ...
    ajax: {
      ...
      dataSrc: function ( receivedData ) {
        console.log('The data has arrived'); // Here you can know that the data has been received
        return receivedData;
      }
    },
    ...
  });
});

answered Oct 10, 2019 at 20:04

Fawaz Ibrahim

1966 bronze badges

2 Comments

Kenzo Over a year ago

What if data has not arrived, can u put the if statement inside the dataSrc ? something like this if(receivedData){ //do something } else { return;} Appreciate the help

Fawaz Ibrahim Over a year ago

No, as i noticed this code will be executed just in case the Ajax succeed

Collectives™ on Stack Overflow

How to check if the ajax call for jQuery DataTable has returned data

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related