Often when using server-side processing you will find that it can be useful to have a specific ID on
each row (the primary key value from the database for example). By assigning the ID you want to apply
to each row using the property DT_RowId of the data source object for each row, DataTables
will automatically add it for you.
In addition to DT_RowId there are two other properties which perform similar actions:
DT_RowClass and DT_RowData:
DT_RowId - Add an ID to the TR elementDT_RowClass - Add a class name to the TR elementDT_RowData - Add HTML5 data- attributes to the TR
element. This is an object of key / value pairs which are assigned as data attributes to the
TR element.This example below shows DT_RowId being used to add information to the table. In
addition objects are used as the data source for the rows.
| 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( {
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "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.