ajax.dataSrc
Data property or manipulation method for table data.
Description
The ajax
option basically inherits all of the options made available by jQuery.ajax, but we provide the extra option of dataSrc
to provide the ability to alter what data DataTables will read from the JSON returned from the server, or to manipulate the data from one form into another (be it JSON to another form of JSON, XML, YAML etc). This is done because the success
option of ajax
should not be altered - DataTables uses it internally to execute the table draw when the data load is complete.
Types
string
- Description:
As a string,
dataSrc
defines the property from the data source object (i.e. that returned by the Ajax request) to read.Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.
Additionally you can use Javascript dotted object notation to get a data source for multiple levels of object / array nesting.
function ajax.dataSrc( data )
- Description:
As a function
dataSrc
provides the ability to manipulate the data returned from the server from one form into another. For example, if your data is split over multiple arrays you might combine it into a single array to return for processing and display by DataTables.In this form
dataSrc
can be used to transform any data source, such as non-JSON data (XML, YAML, etc) into the Javascript array that DataTables expects.- Parameters:
Name Type Optional 1 data
No Data returned from the server for the Ajax request
- Returns:
Array of data that DataTables is to use to draw the table
Default
data
property of the data source object (or aaData
if data
is not present for backwards compatibility).
Examples
Get JSON data from a file via Ajax, using dataSrc
to change data
to tableData
(i.e. { tableData: [ ...data... ] }
):
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"dataSrc": "tableData"
}
} );
Get JSON data from a file via Ajax, using dataSrc
to read data from a plain array rather than an array in an object:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"dataSrc": ""
}
} );
Manipulate the data returned from the server - add a link to data (note this can, should, be done using render
for the column - this is just a simple example of how the data can be manipulated).:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
}
return json.data;
}
}
} );
Related
The following options are directly related and may also be useful in your application development.