DataTables DOM positioning - multiple instances example

Preamble

As is described by the basic DOM positioning example you can use the sDom initialisation parameter to move DataTables features around the table to where you want them. However you can also use sDom to create multiple instances of these table controls. Simply include the feature's identification letter where you want it to appear, as many times as you wish, and the controls will all sync up.

This is shown in the demo below where for four key build-in features are duplicated above and below the table. Note that obviously the table ('t') should be included only once.

Live example

Showing 1 to 10 of 57 entries
Search:
Show entries
Rendering engine Browser Platform(s) Engine version CSS grade
Rendering engine Browser Platform(s) Engine version CSS grade
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
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
Showing 1 to 10 of 57 entries
Search:
Show entries

Initialisation code

$(document).ready(function() {
	$('#example').dataTable( {
		"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
	} );
} );

Other examples

Basic initialisation

Advanced initialisation

Data sources

Server-side processing

API

Plug-ins

Please refer to the DataTables documentation for full information about its API properties and methods.