When making use of DataTables' x-axis scrolling feature, you may wish to fix the left most column in place. This plug-in for DataTables provides exactly this option (note for non-scrolling tables, please use the FixedHeader plug-in, which can fix headers, footers and columns). Key features include:
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | oDT | object | DataTables instance | ||
2 | oInit | object | Optional | {} | Configuration object for FixedColumns. Options are defined by FixedColumns.defaults |
var oTable = $('#example').dataTable( {
"sScrollX": "100%"
} );
new FixedColumns( oTable );
Mark a row such that it's height should be recalculated when using 'semiauto' row height matching. This function will have no effect when 'none' or 'auto' row height matching is used.
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | nTr | Node | TR element that should have it's height recalculated |
var oTable = $('#example').dataTable( {
"sScrollX": "100%"
} );
var oFC = new FixedColumns( oTable );
// manipulate the table - mark the row as needing an update then update the table
// this allows the redraw performed by DataTables fnUpdate to recalculate the row
// height
oFC.fnRecalculateHeight();
oTable.fnUpdate( $('#example tbody tr:eq(0)')[0], ["insert date", 1, 2, 3 ... ]);
Recalculate the resizes of the 3x3 grid that FixedColumns uses for display of the table. This is useful if you update the width of the table container. Note that FixedColumns will perform this function automatically when the window.resize event is fired.
var oTable = $('#example').dataTable( {
"sScrollX": "100%"
} );
var oFC = new FixedColumns( oTable );
// Resize the table container and then have FixedColumns adjust its layout....
$('#content').width( 1200 );
oFC.fnRedrawLayout();
Set the height of a given row - provides cross browser compatibility
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | nTarget | Node | TR element that should have it's height recalculated | ||
2 | iHeight | int | Height in pixels to set |
var oTable = $('#example').dataTable( {
"sScrollX": "100%"
} );
var oFC = new FixedColumns( oTable );
// You may want to do this after manipulating a row in the fixed column
oFC.fnSetRowHeight( $('#example tbody tr:eq(0)')[0], 50 );
Update the fixed columns - including headers and footers. Note that FixedColumns will automatically update the display whenever the host DataTable redraws.
var oTable = $('#example').dataTable( {
"sScrollX": "100%"
} );
var oFC = new FixedColumns( oTable );
// at some later point when the table has been manipulated....
oFC.fnUpdate();
Event fired whenever FixedColumns redraws the fixed columns (i.e. clones the table elements from the main DataTable). This will occur whenever the DataTable that the FixedColumns instance is attached does its own draw.
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | e | event | jQuery event object | ||
2 | o | object | Event parameters from FixedColumns | ||
| o.leftClone | object | Instance's object dom.clone.left for easy reference. This object contains references to the left fixed clumn column's nodes | |||
| o.rightClone | object | Instance's object dom.clone.right for easy reference. This object contains references to the right fixed clumn column's nodes |