When loading data from an Ajax source, by default, DataTables will look for the data to use in the
data parameter of a returned object (e.g. { "data": [...] }). This can easily
be change by using the dataSrc option of the ajax
initiation option.
The ajax.dataSrc has a number of ways in which it can be used:
dataSrc: 'myData') - obtain data from a different property in
the source object.dataSrc: '') - the data source is not an object but an
array.dataSrc: function(json) {}) - a function can be used to
transform the data from one source format to another (for example you could convert from XML to a
Javascript object). The value returned from the function is used as the data for the table.The example below shows ajax.dataSrc being used as a string to get the data from a different
source property, in this case demo but it could be any
value, included a nested property by using standard dotted Javascript object notation.
| Name | Position | Office | Extn. | Start date | Salary |
|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "data/arrays_custom_prop.txt",
"dataSrc": "demo"
}
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.