DataTables example Column rendering

Each column has an optional rendering control called columns.renderDT which can be used to process the content of each cell before the data is used. columns.renderDT has a wide array of options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the content of a cell, as shown here.

This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.

NamePositionOfficeStart dateSalary
NamePositionOfficeStart dateSalary
Airi Satou (33) Accountant Tokyo 2008/11/28 $162,700
Angelica Ramos (47) Chief Executive Officer (CEO) London 2009/10/09 $1,200,000
Ashton Cox (66) Junior Technical Author San Francisco 2009/01/12 $86,000
Bradley Greer (41) Software Engineer London 2012/10/13 $132,000
Brenden Wagner (28) Software Engineer San Francisco 2011/06/07 $206,850
Brielle Williamson (61) Integration Specialist New York 2012/12/02 $372,000
Bruno Nash (38) Software Engineer London 2011/05/03 $163,500
Caesar Vance (21) Pre-Sales Support New York 2011/12/12 $106,450
Cara Stevens (46) Sales Assistant New York 2011/12/06 $145,600
Cedric Kelly (22) Senior Javascript Developer Edinburgh 2012/03/29 $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( {
        "columnDefs": [
            {
                // The `data` parameter refers to the data for the cell (defined by the
                // `data` option, which defaults to the column being worked with, in
                // this case `data: 0`.
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                "targets": 0
            },
            { "visible": false,  "targets": [ 3 ] }
        ]
    } );
} );

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