DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.

Options

The options that FixedHeader presents are basically feature enablement option (which sides of the table should be fixed. Fine tuning of the frozen row / column options is also possible through the zIndex options.

Initialisation

Initialisation of FixedHeader is done by creating a new instance of the FixedHeader class. The constructor for this class takes two parameters: the first is the DataTables instance to attach the fixed header to, and the second (which is optional) is an object with the FixedHeader options you wish to apply. For example:

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"bPaginate": false
	} );
	new $.fn.dataTable.FixedHeader( oTable );
} );

FixedHeader options

bottom
Show details 		Fix the table footer in place, or not, as required.
Default: false
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, { "bottom": true } );
} );
left
Show details 		Fix the left most column in place, or not, as required.
Default: false
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, { "left": true } );
} );
offsetTop
Show details 		Specify an offset from the top of the window where the fixed header where be locked to when scrolling. This is useful for working with fixed elements at the top of the page - for example the Twitter Bootstrap fixed menu.
Default: 0
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, {
		"offsetTop": 40
	} );
} );
right
Show details 		Fix the right most column in place, or not, as required.
Default: false
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, { "right": true } );
} );
top
Show details 		Fix the table header in place, or not, as required.
Default: true
Type: Boolean
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, { "top": false } );
} );
zBottom
Show details 		Set the z-index for the floating footer
Default: 103
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, {
		"bottom": true,
		"zBottom": "2001"
	} );
} );
zLeft
Show details 		Set the z-index for the floating left column
Default: 102
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, {
		"left": true,
		"zLeft": "2001"
	} );
} );
zRight
Show details 		Set the z-index for the floating right column.
Default: 101
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, {
		"right": true,
		"zRight": "2001"
	} );
} );
zTop
Show details 		Set the z-index for the floating header
Default: 104
Type: Integer
Code example: 
$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new FixedHeader( oTable, { "zTop": "2001" } );
} );