ajax.dataSrc

Since: DataTables 1.10

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:

Returns:

	Name	Type	Optional
1	`data`	`object`	No
	Data returned from the server for the Ajax request

array

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;
    }
  }
} );

The following options are directly related and may also be useful in your application development.

API

Options

ajax