DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

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

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

• Usage
• API / parameters

Basic examples

• Basic demo of FixedColumns with zero initialisation
• Fix the left and right columns in place
• Index column attached to side of the table
• Index column, but with Y scrolling and no pagination
• Two columns fixed in place
• Fix the right column in place
• Speeding up row height matching with CSS
• jQuery UI themed table with FixedColumns

Advanced examples

• Using ROWSPAN with FixedColumns
• Server-side processing with FixedColumns
• Individual column filtering
• Setting the fixed column width and resizing the table
• Setting the fixed column width with relative sizing
• Row grouping by grouping like rows in the fixed column
• Row grouping by inserting a grouping row
FixedColumns and DataTables © Allan Jardine 2011.