DataTables example - DOM positioning

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.

Each HTML control element presented by DataTables is denoted by a single character in the dom option. For example the l option is used for the Length changing input option.

The built-in options available are:

• l - Length changing
• f - Filtering input
• t - The Table!
• i - Information
• p - Pagination
• r - pRocessing
• < and > - div elements
• <"#id" and > - div with an id
• <"class" and > - div with a class
• <"#id.class" and > - div with an id and class

Example 1:

<"wrapper"flipt>

This results in the following DOM structure:

<div class="wrapper">
	{filter}
	{length}
	{info}
	{paging}
	

Name	Age	Position	Office	Start date	Salary
Name	Age	Position	Office	Start date	Salary
Tiger Nixon	61	System Architect	Edinburgh	2011/04/25	$3,120
Garrett Winters	63	Director	Edinburgh	2011/07/25	$5,300
Ashton Cox	66	Technical Author	San Francisco	2009/01/12	$4,800
Cedric Kelly	22	Javascript Developer	Edinburgh	2012/03/29	$3,600
Jenna Elliott	33	Financial Controller	Edinburgh	2008/11/28	$5,300
Brielle Williamson	61	Integration Specialist	New York	2012/12/02	$4,525
Herrod Chandler	59	Sales Assistant	San Francisco	2012/08/06	$4,080
Rhona Davidson	55	Integration Specialist	Edinburgh	2010/10/14	$6,730
Colleen Hurst	39	Javascript Developer	San Francisco	2009/09/15	$5,000
Sonya Frost	23	Software Engineer	Edinburgh	2008/12/13	$3,600
Jena Gaines	30	System Architect	London	2008/12/19	$5,000
Quinn Flynn	22	Financial Controller	Edinburgh	2013/03/03	$4,200
Charde Marshall	36	Regional Director	San Francisco	2008/10/16	$5,300
Haley Kennedy	43	Senior Marketing Designer	London	2012/12/18	$4,800
Tatyana Fitzpatrick	19	Regional Director	London	2010/03/17	$2,875
Michael Silva	66	Senior Marketing Designer	London	2012/11/27	$3,750
Paul Byrd	64	Javascript Developer	New York	2010/06/09	$5,000
Gloria Little	59	Systems Administrator	New York	2009/04/10	$3,120
Bradley Greer	41	Software Engineer	London	2012/10/13	$3,120
Dai Rios	35	System Architect	Edinburgh	2012/09/26	$4,200
Jenette Caldwell	30	Financial Controller	New York	2011/09/03	$4,965
Yuri Berry	40	System Architect	New York	2009/06/25	$3,600
Caesar Vance	21	Technical Author	New York	2011/12/12	$4,965
Doris Wilder	23	Sales Assistant	Edinburgh	2010/09/20	$4,965
Angelica Ramos	36	System Architect	London	2009/10/09	$2,875
Gavin Joyce	42	Developer	Edinburgh	2010/12/22	$4,525
Jennifer Chang	28	Regional Director	London	2010/11/14	$4,080
Brenden Wagner	18	Software Engineer	San Francisco	2011/06/07	$3,750
Ebony Grimes	48	Software Engineer	San Francisco	2010/03/11	$2,875
Russell Chavez	20	Director	Edinburgh	2011/08/14	$3,600
Michelle House	37	Integration Specialist	Edinburgh	2011/06/02	$3,750
Suki Burks	53	Developer	London	2009/10/22	$2,875
Prescott Bartlett	27	Technical Author	London	2011/05/07	$6,730
Gavin Cortez	22	Technical Author	San Francisco	2008/10/26	$6,730
Martena Mccray	46	Integration Specialist	Edinburgh	2011/03/09	$4,080
Unity Butler	47	Senior Marketing Designer	San Francisco	2009/12/09	$3,750
Howard Hatfield	51	Financial Controller	San Francisco	2008/12/16	$4,080
Hope Fuentes	41	Financial Controller	San Francisco	2010/02/12	$4,200
Vivian Harrell	62	System Architect	San Francisco	2009/02/14	$4,965
Timothy Mooney	37	Financial Controller	London	2008/12/11	$4,200
Jackson Bradshaw	65	Director	New York	2008/09/26	$5,000
Miriam Weiss	64	Support Engineer	Edinburgh	2011/02/03	$4,965
Bruno Nash	38	Software Engineer	London	2011/05/03	$4,200
Odessa Jackson	37	Support Engineer	Edinburgh	2009/08/19	$3,600
Thor Walton	61	Developer	New York	2013/08/11	$3,600
Finn Camacho	47	Support Engineer	San Francisco	2009/07/07	$4,800
Elton Baldwin	64	Data Coordinator	Edinburgh	2012/04/09	$6,730
Zenaida Frank	63	Software Engineer	New York	2010/01/04	$4,800
Zorita Serrano	56	Software Engineer	San Francisco	2012/06/01	$5,300
Jennifer Acosta	43	Javascript Developer	Edinburgh	2013/02/01	$2,875
Cara Stevens	46	Sales Assistant	New York	2011/12/06	$4,800
Hermione Butler	47	Director	London	2011/03/21	$4,080
Lael Greer	21	Systems Administrator	London	2009/02/27	$3,120
Jonas Alexander	30	Developer	San Francisco	2010/07/14	$5,300
Shad Decker	51	Regional Director	Edinburgh	2008/11/13	$5,300
Michael Bruce	29	Javascript Developer	Edinburgh	2011/06/27	$4,080
Donna Snider	27	System Architect	New York	2011/01/25	$3,120

</div>

Example 2:

<lf<t>ip>

This results in the following DOM structure:

<div>
	{length}
	{filter}
	<div>
		

Name	Age	Position	Office	Start date	Salary
Name	Age	Position	Office	Start date	Salary
Tiger Nixon	61	System Architect	Edinburgh	2011/04/25	$3,120
Garrett Winters	63	Director	Edinburgh	2011/07/25	$5,300
Ashton Cox	66	Technical Author	San Francisco	2009/01/12	$4,800
Cedric Kelly	22	Javascript Developer	Edinburgh	2012/03/29	$3,600
Jenna Elliott	33	Financial Controller	Edinburgh	2008/11/28	$5,300
Brielle Williamson	61	Integration Specialist	New York	2012/12/02	$4,525
Herrod Chandler	59	Sales Assistant	San Francisco	2012/08/06	$4,080
Rhona Davidson	55	Integration Specialist	Edinburgh	2010/10/14	$6,730
Colleen Hurst	39	Javascript Developer	San Francisco	2009/09/15	$5,000
Sonya Frost	23	Software Engineer	Edinburgh	2008/12/13	$3,600
Jena Gaines	30	System Architect	London	2008/12/19	$5,000
Quinn Flynn	22	Financial Controller	Edinburgh	2013/03/03	$4,200
Charde Marshall	36	Regional Director	San Francisco	2008/10/16	$5,300
Haley Kennedy	43	Senior Marketing Designer	London	2012/12/18	$4,800
Tatyana Fitzpatrick	19	Regional Director	London	2010/03/17	$2,875
Michael Silva	66	Senior Marketing Designer	London	2012/11/27	$3,750
Paul Byrd	64	Javascript Developer	New York	2010/06/09	$5,000
Gloria Little	59	Systems Administrator	New York	2009/04/10	$3,120
Bradley Greer	41	Software Engineer	London	2012/10/13	$3,120
Dai Rios	35	System Architect	Edinburgh	2012/09/26	$4,200
Jenette Caldwell	30	Financial Controller	New York	2011/09/03	$4,965
Yuri Berry	40	System Architect	New York	2009/06/25	$3,600
Caesar Vance	21	Technical Author	New York	2011/12/12	$4,965
Doris Wilder	23	Sales Assistant	Edinburgh	2010/09/20	$4,965
Angelica Ramos	36	System Architect	London	2009/10/09	$2,875
Gavin Joyce	42	Developer	Edinburgh	2010/12/22	$4,525
Jennifer Chang	28	Regional Director	London	2010/11/14	$4,080
Brenden Wagner	18	Software Engineer	San Francisco	2011/06/07	$3,750
Ebony Grimes	48	Software Engineer	San Francisco	2010/03/11	$2,875
Russell Chavez	20	Director	Edinburgh	2011/08/14	$3,600
Michelle House	37	Integration Specialist	Edinburgh	2011/06/02	$3,750
Suki Burks	53	Developer	London	2009/10/22	$2,875
Prescott Bartlett	27	Technical Author	London	2011/05/07	$6,730
Gavin Cortez	22	Technical Author	San Francisco	2008/10/26	$6,730
Martena Mccray	46	Integration Specialist	Edinburgh	2011/03/09	$4,080
Unity Butler	47	Senior Marketing Designer	San Francisco	2009/12/09	$3,750
Howard Hatfield	51	Financial Controller	San Francisco	2008/12/16	$4,080
Hope Fuentes	41	Financial Controller	San Francisco	2010/02/12	$4,200
Vivian Harrell	62	System Architect	San Francisco	2009/02/14	$4,965
Timothy Mooney	37	Financial Controller	London	2008/12/11	$4,200
Jackson Bradshaw	65	Director	New York	2008/09/26	$5,000
Miriam Weiss	64	Support Engineer	Edinburgh	2011/02/03	$4,965
Bruno Nash	38	Software Engineer	London	2011/05/03	$4,200
Odessa Jackson	37	Support Engineer	Edinburgh	2009/08/19	$3,600
Thor Walton	61	Developer	New York	2013/08/11	$3,600
Finn Camacho	47	Support Engineer	San Francisco	2009/07/07	$4,800
Elton Baldwin	64	Data Coordinator	Edinburgh	2012/04/09	$6,730
Zenaida Frank	63	Software Engineer	New York	2010/01/04	$4,800
Zorita Serrano	56	Software Engineer	San Francisco	2012/06/01	$5,300
Jennifer Acosta	43	Javascript Developer	Edinburgh	2013/02/01	$2,875
Cara Stevens	46	Sales Assistant	New York	2011/12/06	$4,800
Hermione Butler	47	Director	London	2011/03/21	$4,080
Lael Greer	21	Systems Administrator	London	2009/02/27	$3,120
Jonas Alexander	30	Developer	San Francisco	2010/07/14	$5,300
Shad Decker	51	Regional Director	Edinburgh	2008/11/13	$5,300
Michael Bruce	29	Javascript Developer	Edinburgh	2011/06/27	$4,080
Donna Snider	27	System Architect	New York	2011/01/25	$3,120

	</div>
	{info}
	{paging}
</div>

All options (with the exception of the t (table) option can be specified multiple times, for if you want to show the same control multiple times (pagination at the top and bottom of the table for example).

Furthermore, note that additional dom options can be added to DataTables through the use of plug-ins.

In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container div.

Name	Age	Position	Office	Start date	Salary
Name	Age	Position	Office	Start date	Salary
Tiger Nixon	61	System Architect	Edinburgh	2011/04/25	$3,120
Garrett Winters	63	Director	Edinburgh	2011/07/25	$5,300
Ashton Cox	66	Technical Author	San Francisco	2009/01/12	$4,800
Cedric Kelly	22	Javascript Developer	Edinburgh	2012/03/29	$3,600
Jenna Elliott	33	Financial Controller	Edinburgh	2008/11/28	$5,300
Brielle Williamson	61	Integration Specialist	New York	2012/12/02	$4,525
Herrod Chandler	59	Sales Assistant	San Francisco	2012/08/06	$4,080
Rhona Davidson	55	Integration Specialist	Edinburgh	2010/10/14	$6,730
Colleen Hurst	39	Javascript Developer	San Francisco	2009/09/15	$5,000
Sonya Frost	23	Software Engineer	Edinburgh	2008/12/13	$3,600
Jena Gaines	30	System Architect	London	2008/12/19	$5,000
Quinn Flynn	22	Financial Controller	Edinburgh	2013/03/03	$4,200
Charde Marshall	36	Regional Director	San Francisco	2008/10/16	$5,300
Haley Kennedy	43	Senior Marketing Designer	London	2012/12/18	$4,800
Tatyana Fitzpatrick	19	Regional Director	London	2010/03/17	$2,875
Michael Silva	66	Senior Marketing Designer	London	2012/11/27	$3,750
Paul Byrd	64	Javascript Developer	New York	2010/06/09	$5,000
Gloria Little	59	Systems Administrator	New York	2009/04/10	$3,120
Bradley Greer	41	Software Engineer	London	2012/10/13	$3,120
Dai Rios	35	System Architect	Edinburgh	2012/09/26	$4,200
Jenette Caldwell	30	Financial Controller	New York	2011/09/03	$4,965
Yuri Berry	40	System Architect	New York	2009/06/25	$3,600
Caesar Vance	21	Technical Author	New York	2011/12/12	$4,965
Doris Wilder	23	Sales Assistant	Edinburgh	2010/09/20	$4,965
Angelica Ramos	36	System Architect	London	2009/10/09	$2,875
Gavin Joyce	42	Developer	Edinburgh	2010/12/22	$4,525
Jennifer Chang	28	Regional Director	London	2010/11/14	$4,080
Brenden Wagner	18	Software Engineer	San Francisco	2011/06/07	$3,750
Ebony Grimes	48	Software Engineer	San Francisco	2010/03/11	$2,875
Russell Chavez	20	Director	Edinburgh	2011/08/14	$3,600
Michelle House	37	Integration Specialist	Edinburgh	2011/06/02	$3,750
Suki Burks	53	Developer	London	2009/10/22	$2,875
Prescott Bartlett	27	Technical Author	London	2011/05/07	$6,730
Gavin Cortez	22	Technical Author	San Francisco	2008/10/26	$6,730
Martena Mccray	46	Integration Specialist	Edinburgh	2011/03/09	$4,080
Unity Butler	47	Senior Marketing Designer	San Francisco	2009/12/09	$3,750
Howard Hatfield	51	Financial Controller	San Francisco	2008/12/16	$4,080
Hope Fuentes	41	Financial Controller	San Francisco	2010/02/12	$4,200
Vivian Harrell	62	System Architect	San Francisco	2009/02/14	$4,965
Timothy Mooney	37	Financial Controller	London	2008/12/11	$4,200
Jackson Bradshaw	65	Director	New York	2008/09/26	$5,000
Miriam Weiss	64	Support Engineer	Edinburgh	2011/02/03	$4,965
Bruno Nash	38	Software Engineer	London	2011/05/03	$4,200
Odessa Jackson	37	Support Engineer	Edinburgh	2009/08/19	$3,600
Thor Walton	61	Developer	New York	2013/08/11	$3,600
Finn Camacho	47	Support Engineer	San Francisco	2009/07/07	$4,800
Elton Baldwin	64	Data Coordinator	Edinburgh	2012/04/09	$6,730
Zenaida Frank	63	Software Engineer	New York	2010/01/04	$4,800
Zorita Serrano	56	Software Engineer	San Francisco	2012/06/01	$5,300
Jennifer Acosta	43	Javascript Developer	Edinburgh	2013/02/01	$2,875
Cara Stevens	46	Sales Assistant	New York	2011/12/06	$4,800
Hermione Butler	47	Director	London	2011/03/21	$4,080
Lael Greer	21	Systems Administrator	London	2009/02/27	$3,120
Jonas Alexander	30	Developer	San Francisco	2010/07/14	$5,300
Shad Decker	51	Regional Director	Edinburgh	2008/11/13	$5,300
Michael Bruce	29	Javascript Developer	Edinburgh	2011/06/27	$4,080
Donna Snider	27	System Architect	New York	2011/01/25	$3,120

Basic Init

• Complex headers (rowspan and colspan)
• DOM positioning
• Flexible table width
• Feature enable / disable
• Hidden columns
• Alternative pagination
• Language options
• Multi-column sorting
• Multiple tables
• Scroll - vertical with jQuery UI ThemeRoller
• Scroll - horizontal
• Scroll - horizontal and vertical
• State saving
• Zero configuration
• Default sorting
• jQuery UI themes
• Scroll - vertical

Advanced Init

• Complex headers (rowspan / colspan)
• Defaults
• Multiple table control elements
• Custom toolbar elements
• Column rendering
• DataTables events
• Events
• Footer callback
• Page length options
• Row created callback
• Row grouping
• Row grouping
• Language file

Styling

• Base style
• Base style - no styling classes
• Base style - row borders
• Base style - cell borders
• Base style - hover
• Base style - sort-column
• Base style - stripe
• jQuery UI ThemeRoller
• Bootstrap
• Foundation

Data Sources

• DOM sourced data
• Ajax sourced data
• Javascript sourced data
• Server-side processing

Ajax

• Ajax data source (arrays)
• Ajax data source (objects)
• Nested object data (objects)
• Nested object data (arrays)
• Generated content for a column
• AJAX custom data source example
• AJAX deferred rendering example

Server Side

• Server-side processing
• Custom HTTP variables
• POST data
• Automatic addition of row ID attributes
• Object data source
• POST data
• Row selection
• JSONP data source for remote domains
• Deferred loading of data
• Pipelining data to reduce Ajax calls for paging

Api

• Using API in callbacks
• Index column
• Form inputs
• Highlighting rows and columns
• Add rows
• Individual column filtering (text inputs)
• Individual column filtering (select inputs)
• Row selection (multiple rows)
• Filtering API (regular expressions)
• Row selection and deletion (single row)
• Scrolling and jQuery UI tabs
• Show / hide columns dynamically
• Child rows (show extra / detailed information)

Plug-ins

• API plug-in methods
• Sorting plug-ins (with type detection)
• Sorting plug-ins (no type detection)
• Sorting plug-ins (with type detection)
• Live DOM sorting