Preamble

This example is basically the same as the index column example but in this case shows pagination disabled and Y scrolling in use.

Live example

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollY": "300px",
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true,
		"bPaginate": false,
		"fnDrawCallback": function ( oSettings ) {
			/* Need to redo the counters if filtered or sorted */
			if ( oSettings.bSorted || oSettings.bFiltered ) {
				for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ) {
					var nTr = oSettings.aoData[ oSettings.aiDisplay[i] ].nTr;

					// Update the index column and do so without redrawing the table
					this.fnUpdate( i+1, nTr, 0, false, false );
				}
			}
		},
		"aoColumnDefs": [
			{ "bSortable": false, "sClass": "index", "aTargets": [ 0 ] }
		],
		"aaSorting": [[ 1, 'asc' ]]
	} );
	new FixedColumns( oTable );
} );

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.