Preamble

FixedHeader is a particularly useful plug-in for DataTables, allowing a table header to float at the top of a scrolling window. ColReorder works well with FixedHeader, allowing you to reorder columns even using the floating header, as shown in the example below.

Live example

Show 102550100 entries

Search:

Rendering engine	Browser	Platform(s)	Engine version	CSS grade
Rendering engine	Browser	Platform(s)	Engine version	CSS grade
Gecko	Firefox 1.5	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 2.0	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 3.0	Win 2k+ / OSX.3+	1.9	A
Gecko	Camino 1.0	OSX.2+	1.8	A
Gecko	Camino 1.5	OSX.3+	1.8	A
Gecko	Netscape 7.2	Win 95+ / Mac OS 8.6-9.2	1.7	A
Gecko	Netscape Browser 8	Win 98SE+	1.7	A
Gecko	Netscape Navigator 9	Win 98+ / OSX.2+	1.8	A
Gecko	Mozilla 1.0	Win 95+ / OSX.1+	1	A
Gecko	Mozilla 1.1	Win 95+ / OSX.1+	1.1	A

Showing 1 to 10 of 57 entries

PreviousNext

Examples

• Basic initialisation
• Styling the insert cursor
• Individual column filtering
• Integration with DataTables' ColVis plug-in
• Integration with DataTables' FixedColumns plug-in
• Integration with DataTables' FixedHeader plug-in
• Using a predefined column order set
• Providing a user control to reset the column order
• Column reordering shown with scrolling in DataTables
• Server-side processing support
• State saving of the column position
• jQuery UI theme integration

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		 "sDom": 'RC<"clear">lfrtip'
	} );
	new FixedHeader( oTable );
} );