| Classes (0) | Namespaces (1) |
| Properties (0) | Static properties (1) |
| Methods (5) | Static methods (0) |
| Events (0) |
| Properties (0) | Static properties (1) |
| Methods (5) | Static methods (0) |
| Events (0) |
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 | dt | object | DataTables instance. With DataTables 1.10 this can also be a jQuery collection, a jQuery selector, DataTables API instance or settings object. | ||
2 | init | object | Optional | {} | Configuration object for FixedColumns. Options are defined by FixedColumns.defaults |
var table = $('#example').dataTable( {
"scrollX": "100%"
} );
new $.fn.dataTable.fixedColumns( table );
Get data index information about a row or cell in the table body. This function is functionally identical to fnGetPosition in DataTables, taking the same parameter (TH, TD or TR node) and returning exactly the the same information (data index information). THe difference between the two is that this method takes into account the fixed columns in the table, so you can pass in nodes from the master table, or the cloned tables and get the index position for the data in the main table.
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.
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.
Set the height of a given row - provides cross browser compatibility
Update the fixed columns - including headers and footers. Note that FixedColumns will automatically update the display whenever the host DataTable redraws.
Get data index information about a row or cell in the table body. This function is functionally identical to fnGetPosition in DataTables, taking the same parameter (TH, TD or TR node) and returning exactly the the same information (data index information). THe difference between the two is that this method takes into account the fixed columns in the table, so you can pass in nodes from the master table, or the cloned tables and get the index position for the data in the main table.
| Name | Type | Attributes | Default | Description | |
|---|---|---|---|---|---|
1 | node | node | TR, TH or TD element to get the information about |
If nNode is given as a TR, then a single index is returned, or if given as a cell, an array of [row index, column index (visible), column index (all)] is given.
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 table = $('#example').dataTable( {
"scrollX": "100%"
} );
var fc = new $.fn.dataTable.fixedColumns( table );
// 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
fc.fnRecalculateHeight();
table.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 table = $('#example').dataTable( {
"scrollX": "100%"
} );
var fc = new $.fn.dataTable.fixedColumns( table );
// Resize the table container and then have FixedColumns adjust its layout....
$('#content').width( 1200 );
fc.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 table = $('#example').dataTable( {
"scrollX": "100%"
} );
var fc = new $.fn.dataTable.fixedColumns( table );
// You may want to do this after manipulating a row in the fixed column
fc.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 table = $('#example').dataTable( {
"scrollX": "100%"
} );
var fc = new $.fn.dataTable.fixedColumns( table );
// at some later point when the table has been manipulated....
fc.fnUpdate();