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,
dataSrcdefines 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.
object
- Description:
When provided as an object this parameter can be used to provide mapping between the response from a server and DataTables for it's server-side processing parameters. It is used for cases when the JSON response from the server is not in the format that DataTables expects.
There are four parameters which can be defined in the object:
data- Maps to where the value for thedataarray is.draw- Maps to where the value is to use for thedrawparameter.recordsTotal- Maps to where the value for therecordsTotalparameter is.recordsFiltered- Maps to where the value for therecordsFilteredparameter is.
Please refer to the server-side processing documentation for a full description of these parameters.
Each mapping value may be a string in Javascript dotted object notation or a function. If a function a single parameter is passed in, the JSON response from the server, and the return value should be the value for the parameter.
function ajax.dataSrc( data )
- Description:
As a function
dataSrcprovides 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
dataSrccan 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 dataNo 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;
}
}
});Map parameters to DataTables' expected server-side processing parameter names.:
$('#example').DataTable({
ajax: {
url: '/api/users',
dataSrc: {
data: 'results',
draw: 'request',
recordsTotal: 'total',
recordsFiltered: 'filtered'
}
},
serverSide: true
});Related
The following options are directly related and may also be useful in your application development.