DataTables example Row grouping

Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.

In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the drawCallbackDT function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.

NamePositionAgeStart dateSalary
NamePositionAgeStart dateSalary
Edinburgh
Tiger Nixon System Architect 61 2011/04/25 $320,800
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Dai Rios Personnel Lead 35 2012/09/26 $217,500
Gavin Joyce Developer 42 2010/12/22 $92,575
Martena Mccray Post-Sales support 46 2011/03/09 $324,050
Jennifer Acosta Junior Javascript Developer 43 2013/02/01 $75,650
Shad Decker Regional Director 51 2008/11/13 $183,000
London
Jena Gaines Office Manager 30 2008/12/19 $90,560
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750
Michael Silva Marketing Designer 66 2012/11/27 $198,500
Bradley Greer Software Engineer 41 2012/10/13 $132,000
Angelica Ramos Chief Executive Officer (CEO) 47 2009/10/09 $1,200,000
Suki Burks Developer 53 2009/10/22 $114,500
Prescott Bartlett Technical Author 27 2011/05/07 $145,000
Timothy Mooney Office Manager 37 2008/12/11 $136,200
Bruno Nash Software Engineer 38 2011/05/03 $163,500
Hermione Butler Regional Director 47 2011/03/21 $356,250
Lael Greer Systems Administrator 21 2009/02/27 $103,500
New York
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Paul Byrd Chief Financial Officer (CFO) 64 2010/06/09 $725,000
Gloria Little Systems Administrator 59 2009/04/10 $237,500
Jenette Caldwell Development Lead 30 2011/09/03 $345,000
Showing 1 to 25 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [
            { "visible": false, "targets": 2 }
        ],
        "order": [[ 2, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(2, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
 
    // Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
            table.order( [ 2, 'desc' ] ).draw();
        }
        else {
            table.order( [ 2, 'asc' ] ).draw();
        }
    } );
} );

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