DataTables example Custom data source property

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 ajaxDT initiation option.

The ajax.dataSrcDT has a number of ways in which it can be used:

  • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in the source object.
  • As an empty string (e.g. dataSrc: '') - the data source is not an object but an array.
  • As a function (e.g. 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.dataSrcDT 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.

NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Loading...
Showing 0 to 0 of 0 entries

The Javascript shown below is used to initialise the table shown in this example:

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