DataTables Example Using an Ajax Callback

The DataTables ajax option, documented here, is a common way to retrieve dynamic data from a source, for loading into a table.

Typically, I use this option with an object – something like this:

$('#example').dataTable( {
  "ajax": {
    "url": "https://myurl.goeshere.com/mydata",
    "type": "POST",
    "dataSrc": "my_data"
  }
} );

This is basically a wrapper around the jQuery ajax() API – with the addition of dataSrc to help DataTables locate its row iteration starting point.

However, you can also use a function with the DataTables ajax option, instead of an object. The following fragment shows an example:

$(document).ready(function() {

  var table = $('#demo').DataTable( {

    ajax: function (data, callback, settings) {
      $.ajax({
        url: "http://localhost:7000/ajax-employee-objects",
      }).then ( function( json, textStatus, jqXHR ) {
		json["data"] = json["row_objects"];
		delete json["row_objects"];
		//console.log(textStatus); // "success"
		//console.log(json.extra_data.foo); // "bar"
        callback(json);
      });
    },
    columns: [
      { data: "name" },
      { data: "position" },
      { data: "office" },
      { data: "extn" },
      { data: "start_date" },
      { data: "salary" }
    ]
  });

} );

This approach allows you to process the JSON response from the ajax call, before passing the row array data to DataTables. You can therefore re-arrange the JSON data, and process additional data in the JSON if needed.

In this specific example, the option uses a function. In this case, it’s up to you to make the actual ajax call (e.g. using jQuery’s ajax API, as shown above).

The three parameters made available in this option are:

Parameter	Notes
data	The data to be sent to the server.
callback	Callback function that must be executed when the required data has been obtained from the ajax request. That data should be passed into the callback as the only parameter.
settings	The DataTable settings object.

In our example the callback function re-names the data array from row_objects to data:

json["data"] = json["row_objects"];
delete json["row_objects"];

This is needed because DataTables expects the data array to be called data – and the normal approach (using dataSrc: 'row_objects') is not available when the ajax function is used.

An example of the JSON handled by the above code is:

{
  "extra_data": {
    "foo": "bar",
    "baz": 123
  },
  "row_objects": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
	...
  ]
}

Add to favorites