FixedColumns example - row grouping

Preamble

This example is designed to re-implement the visual effect of the DataTables row grouping example with a fixed column. It is alternative row grouping style to that presented in the row grouping by height example.

Live example

Browser
Gecko
Camino 1.0
Camino 1.5
Epiphany 2.20
Firefox 1.0
Firefox 1.5
Firefox 2.0
Firefox 3.0
Mozilla 1.0
Mozilla 1.1
Mozilla 1.2
Mozilla 1.3
Mozilla 1.4
Mozilla 1.5
Mozilla 1.6
Mozilla 1.7
Mozilla 1.8
Netscape 7.2
Netscape Browser 8
Netscape Navigator 9
Seamonkey 1.1
KHTML
Konqureror 3.1
Konqureror 3.3
Konqureror 3.5
Misc
Dillo 0.8
IE Mobile
Links
Lynx
NetFront 3.1
NetFront 3.4
PSP browser
Other browsers
All others
Presto
Nintendo DS browser
Nokia N800
Opera 7.0
Opera 7.5
Opera 8.0
Opera 8.5
Opera 9.0
Opera 9.2
Opera 9.5
Opera for Wii
Tasman
Internet Explorer 4.5
Internet Explorer 5.1
Internet Explorer 5.2
Trident
AOL browser (AOL desktop)
Internet Explorer 4.0
Internet Explorer 5.0
Internet Explorer 5.5
Internet Explorer 6
Internet Explorer 7
Webkit
iPod Touch / iPhone
OmniWeb 5.5
S60
Safari 1.2
Safari 1.3
Safari 2.0
Safari 3.0
Platform(s)Engine versionCSS grade
 
OSX.2+ 1.8 A
OSX.3+ 1.8 A
Gnome 1.8 A
Win 98+ / OSX.2+ 1.7 A
Win 98+ / OSX.2+ 1.8 A
Win 98+ / OSX.2+ 1.8 A
Win 2k+ / OSX.3+ 1.9 A
Win 95+ / OSX.1+ 1 A
Win 95+ / OSX.1+ 1.1 A
Win 95+ / OSX.1+ 1.2 A
Win 95+ / OSX.1+ 1.3 A
Win 95+ / OSX.1+ 1.4 A
Win 95+ / OSX.1+ 1.5 A
Win 95+ / OSX.1+ 1.6 A
Win 98+ / OSX.1+ 1.7 A
Win 98+ / OSX.1+ 1.8 A
Win 95+ / Mac OS 8.6-9.2 1.7 A
Win 98SE+ 1.7 A
Win 98+ / OSX.2+ 1.8 A
Win 98+ / OSX.2+ 1.8 A
 
KDE 3.1 3.1 C
KDE 3.3 3.3 A
KDE 3.5 3.5 A
 
Embedded devices - X
Windows Mobile 6 - C
Text only - X
Text only - X
Embedded devices - C
Embedded devices - A
PSP - C
 
- - U
 
Nintendo DS 8.5 C/A
N800 - A
Win 95+ / OSX.1+ - A
Win 95+ / OSX.2+ - A
Win 95+ / OSX.2+ - A
Win 95+ / OSX.2+ - A
Win 95+ / OSX.3+ - A
Win 88+ / OSX.3+ - A
Win 88+ / OSX.3+ - A
Wii - A
 
Mac OS 8-9 - X
Mac OS 7.6-9 1 C
Mac OS 8-X 1 C
 
Win XP 6 A
Win 95+ 4 X
Win 95+ 5 C
Win 95+ 5.5 A
Win 98+ 6 A
Win XP SP2+ 7 A
 
iPod 420.1 A
OSX.4+ 420 A
S60 413 A
OSX.3 125.5 A
OSX.3 312.8 A
OSX.4+ 419.3 A
OSX.4+ 522.1 A
Showing 1 to 57 of 57 entries

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollY": "300px",
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true,
		"bPaginate": false,
		"aaSortingFixed": [ [1, 'asc'] ],
		"aoColumnDefs": [
			{ "bVisible": false, "aTargets": [1] }
		]
	} );

	new FixedColumns( oTable, {
		"fnDrawCallback": function ( left, right ) {
			var oSettings = oTable.fnSettings();
			if ( oSettings.aiDisplay.length == 0 )
			{
				return;
			}

			var nGroup, nCell, iIndex, sGroup;
			var sLastGroup = "", iCorrector=0;
			var nTrs = $('#example tbody tr');
			var iColspan = nTrs[0].getElementsByTagName('td').length;

			for ( var i=0 ; i<nTrs.length ; i++ )
			{
				iIndex = oSettings._iDisplayStart + i;
				sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1]			;
				
				if ( sGroup != sLastGroup )
				{
					/* Cell to insert into main table */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.colSpan = iColspan;
					nCell.className = "group";
					nCell.innerHTML = "&nbsp;";
					nGroup.appendChild( nCell );
					nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );

					/* Cell to insert into the frozen columns */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.className = "group";
					nCell.innerHTML = sGroup;
					nGroup.appendChild( nCell );
					$(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] );

					iCorrector++;
					sLastGroup = sGroup;
				}
			}
		}
	} );
} );

Documentation

Basic examples

Advanced examples