DataTables example Orthogonal data

To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.

This can be done quite simply by using the columns.dataDT option which you use to tell DataTables which property to use from the data source object for each column.

In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:

1
2
3
4
5
6
7
8
9
10
11
{
    "name":    "Tiger Nixon",
    "position":   "System Architect",
    "salary":    "$3,120",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400"
    },
    "office":    "Edinburgh",
    "extn":    "5421"
}
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
Airi SatouAccountantTokyo5407Fri 28th Nov 08$162,700
Angelica RamosChief Executive Officer (CEO)London5797Fri 9th Oct 09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco1562Mon 12th Jan 09$86,000
Bradley GreerSoftware EngineerLondon2558Sat 13th Oct 12$132,000
Brenden WagnerSoftware EngineerSan Francisco1314Tue 7th Jun 11$206,850
Brielle WilliamsonIntegration SpecialistNew York4804Sun 2nd Dec 12$372,000
Bruno NashSoftware EngineerLondon6222Tue 3rd May 11$163,500
Caesar VancePre-Sales SupportNew York8330Mon 12th Dec 11$106,450
Cara StevensSales AssistantNew York3990Tue 6th Dec 11$145,600
Cedric KellySenior Javascript DeveloperEdinburgh6224Thu 29th Mar 12$433,060
Showing 1 to 10 of 57 entries

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    $('#example').dataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp"
            } },
            { data: "salary" }
        ]
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: