DataTables row grouping example

Preamble

Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the plug-in it was felt), it is most certainly possible to give the look and feel of row grouping. In the example below the 'group' is the browser engine, which is based on the information in the first column (set to hidden). The grouping indicator is added by the fnDrawCallback function, which will parse through the rows which are displayed, and enter a TR element where a new group is found.

Live example

BrowserPlatform(s)Engine versionCSS grade
Gecko
Camino 1.0 OSX.2+ 1.8 A
Camino 1.5 OSX.3+ 1.8 A
Epiphany 2.20 Gnome 1.8 A
Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Showing 1 to 10 of 57 entries

Initialisation code

?
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
36
$(document).ready(function() {
    oTable = $('#example').dataTable({
        "fnDrawCallback": function ( oSettings ) {
            if ( oSettings.aiDisplay.length == 0 )
            {
                return;
            }
             
            var nTrs = $('#example tbody tr');
            var iColspan = nTrs[0].getElementsByTagName('td').length;
            var sLastGroup = "";
            for ( var i=0 ; i<nTrs.length ; i++ )
            {
                var iDisplayIndex = oSettings._iDisplayStart + i;
                var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
                if ( sGroup != sLastGroup )
                {
                    var nGroup = document.createElement( 'tr' );
                    var nCell = document.createElement( 'td' );
                    nCell.colSpan = iColspan;
                    nCell.className = "group";
                    nCell.innerHTML = sGroup;
                    nGroup.appendChild( nCell );
                    nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
                    sLastGroup = sGroup;
                }
            }
        },
        "aoColumnDefs": [
            { "bVisible": false, "aTargets": [ 0 ] }
        ],
        "aaSortingFixed": [[ 0, 'asc' ]],
        "aaSorting": [[ 1, 'asc' ]],
        "sDom": 'lfr<"giveHeight"t>ip'
    });
} );

Other examples

Basic initialisation

Advanced initialisation

API

Data sources

Server-side processing

Ajax data source

Plug-ins