DataTables example Automatic addition of row ID attributes

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:

  • {string} DT_RowId - Add an ID to the TR element
  • {string} DT_RowClass - Add a class name to the TR element
  • {object} DT_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.

Processing...
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary

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
$(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: