Responsive example Whole row child row control

When using the column details type in Responsive the responsive.details.targetR option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.

This example uses the tr selector to have the whole row act as the control.

First nameLast namePositionOfficeAgeStart dateSalaryExtn.
First nameLast namePositionOfficeAgeStart dateSalaryExtn.
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700 5407
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000 5797
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000 1562
Bradley Greer Software Engineer London 41 2012/10/13 $132,000 2558
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850 1314
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000 4804
Bruno Nash Software Engineer London 38 2011/05/03 $163,500 6222
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450 8330
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600 3990
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060 6224
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( {
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
    } );
} );

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