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.data 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:
+
+{
+ "name": "Tiger Nixon",
+ "position": "System Architect",
+ "salary": "$3,120",
+ "start_date": {
+ "display": "Mon 25th Apr 11",
+ "timestamp": "1303682400"
+ },
+ "office": "Edinburgh",
+ "extn": "5421"
+}
+
+
+ | Name | +Position | +Office | +Extn. | +Start date | +Salary | +
|---|---|---|---|---|---|
| Name | +Position | +Office | +Extn. | +Start date | +Salary | +
The Javascript shown below is used to initialise the table shown in this + example:
$(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:
+ + +The HTML shown below is the raw HTML table element, before it has been enhanced by + DataTables:
+This example uses a little bit of additional CSS beyond what is loaded from the library + files (below), in order to correctly display the table. The additional CSS used is shown + below:
The following CSS library files are loaded for use in this example to provide the styling of the + table:
+ + +This table loads data by Ajax. The latest data that has been loaded is shown below. This data + will update automatically as any additional data is loaded.
+The script used to perform the server-side processing for this table is shown below. Please note + that this is just an example script using PHP. Server-side processing scripts can be written in any + language, using the protocol described in the + DataTables documentation.
+One of the best ways of learning how to do anything new (including software APIs!) is to get your + hands dirty as quickly as possible. These examples will show you how to perform tasks ranging from + something as simple as applying DataTables to an HTML table, right the way through to doing server-side + processing with pipelining and custom plug-in functions.
+| Rendering engine | +Browser | +Platform(s) | +Engine version | +CSS grade | +
|---|---|---|---|---|
| Trident | +Internet + Explorer 4.0 | +Win 95+ | +4 | +X | +
| Trident | +Internet + Explorer 5.0 | +Win 95+ | +5 | +C | +
| Trident | +Internet + Explorer 5.5 | +Win 95+ | +5.5 | +A | +
| Trident | +Internet + Explorer 6 | +Win 98+ | +6 | +A | +
| Trident | +Internet Explorer 7 | +Win XP SP2+ | +7 | +A | +
| Trident | +AOL browser (AOL desktop) | +Win XP | +6 | +A | +
| Gecko | +Firefox 1.0 | +Win 98+ / OSX.2+ | +1.7 | +A | +
| Gecko | +Firefox 1.5 | +Win 98+ / OSX.2+ | +1.8 | +A | +
| Gecko | +Firefox 2.0 | +Win 98+ / OSX.2+ | +1.8 | +A | +
| Gecko | +Firefox 3.0 | +Win 2k+ / OSX.3+ | +1.9 | +A | +
| Gecko | +Camino 1.0 | +OSX.2+ | +1.8 | +A | +
| Gecko | +Camino 1.5 | +OSX.3+ | +1.8 | +A | +
| Gecko | +Netscape 7.2 | +Win 95+ / Mac OS 8.6-9.2 | +1.7 | +A | +
| Gecko | +Netscape Browser 8 | +Win 98SE+ | +1.7 | +A | +
| Gecko | +Netscape Navigator 9 | +Win 98+ / OSX.2+ | +1.8 | +A | +
| Gecko | +Mozilla 1.0 | +Win 95+ / OSX.1+ | +1 | +A | +
| Gecko | +Mozilla 1.1 | +Win 95+ / OSX.1+ | +1.1 | +A | +
| Gecko | +Mozilla 1.2 | +Win 95+ / OSX.1+ | +1.2 | +A | +
| Gecko | +Mozilla 1.3 | +Win 95+ / OSX.1+ | +1.3 | +A | +
| Gecko | +Mozilla 1.4 | +Win 95+ / OSX.1+ | +1.4 | +A | +
| Gecko | +Mozilla 1.5 | +Win 95+ / OSX.1+ | +1.5 | +A | +
| Gecko | +Mozilla 1.6 | +Win 95+ / OSX.1+ | +1.6 | +A | +
| Gecko | +Mozilla 1.7 | +Win 98+ / OSX.1+ | +1.7 | +A | +
| Gecko | +Mozilla 1.8 | +Win 98+ / OSX.1+ | +1.8 | +A | +
| Gecko | +Seamonkey 1.1 | +Win 98+ / OSX.2+ | +1.8 | +A | +
| Gecko | +Epiphany 2.20 | +Gnome | +1.8 | +A | +
| Webkit | +Safari 1.2 | +OSX.3 | +125.5 | +A | +
| Webkit | +Safari 1.3 | +OSX.3 | +312.8 | +A | +
| Webkit | +Safari 2.0 | +OSX.4+ | +419.3 | +A | +
| Webkit | +Safari 3.0 | +OSX.4+ | +522.1 | +A | +
| Webkit | +OmniWeb 5.5 | +OSX.4+ | +420 | +A | +
| Webkit | +iPod Touch / iPhone | +iPod | +420.1 | +A | +
| Webkit | +S60 | +S60 | +413 | +A | +
| Presto | +Opera 7.0 | +Win 95+ / OSX.1+ | +- | +A | +
| Presto | +Opera 7.5 | +Win 95+ / OSX.2+ | +- | +A | +
| Presto | +Opera 8.0 | +Win 95+ / OSX.2+ | +- | +A | +
| Presto | +Opera 8.5 | +Win 95+ / OSX.2+ | +- | +A | +
| Presto | +Opera 9.0 | +Win 95+ / OSX.3+ | +- | +A | +
| Presto | +Opera 9.2 | +Win 88+ / OSX.3+ | +- | +A | +
| Presto | +Opera 9.5 | +Win 88+ / OSX.3+ | +- | +A | +
| Presto | +Opera for Wii | +Wii | +- | +A | +
| Presto | +Nokia N800 | +N800 | +- | +A | +
| Presto | +Nintendo DS browser | +Nintendo DS | +8.5 | +C/A1 | +
| KHTML | +Konqureror 3.1 | +KDE 3.1 | +3.1 | +C | +
| KHTML | +Konqureror 3.3 | +KDE 3.3 | +3.3 | +A | +
| KHTML | +Konqureror 3.5 | +KDE 3.5 | +3.5 | +A | +
| Tasman | +Internet Explorer 4.5 | +Mac OS 8-9 | +- | +X | +
| Tasman | +Internet Explorer 5.1 | +Mac OS 7.6-9 | +1 | +C | +
| Tasman | +Internet Explorer 5.2 | +Mac OS 8-X | +1 | +C | +
| Misc | +NetFront 3.1 | +Embedded devices | +- | +C | +
| Misc | +NetFront 3.4 | +Embedded devices | +- | +A | +
| Misc | +Dillo 0.8 | +Embedded devices | +- | +X | +
| Misc | +Links | +Text only | +- | +X | +
| Misc | +Lynx | +Text only | +- | +X | +
| Misc | +IE Mobile | +Windows Mobile 6 | +- | +C | +
| Misc | +PSP browser | +PSP | +- | +C | +
| Other browsers | +All others | +- | +- | +U | +