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:

1
2
3
4
5
6
7
$('#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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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:

1
2
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "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"
    },
	...
  ]
}