Advance Initialization

DataTables

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Reference

DOM/Jquery

Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM.

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Column Rendering

This example shows the person's age combined with their name in the first column, hiding the age column.

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Multiple Table Control Elements

In addition to this, you can also use dom to create multiple instances of these table controls. Simply include the feature's identification letter where you want it to appear.

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Complex Headers With Column Visibility

Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.

Name	HR Information		Contact
Name	Position	Salary	Office	Extn.	E-mail
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Salary	Office	Extn.	E-mail

Language File

As well as being able to pass language information to DataTables through the language initialization option, you can also store the language information in a file

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Setting Defaults

When working with DataTables over multiple pages it is often useful to set the initialization defaults to common values

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Row Grouping

Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Footer Callback

Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback), it is possible to perform some powerful and useful data manipulation functions.

First name	Last name	Office	age	DOB	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Total:

Custom Toolbar Elements

DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom elements

First name	Last name	Office	age	DOB	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Total:

Row Created Callback

The following example shows how a callback function can be used to format a particular row at draw time.

Name	Position	Office	Age	Start date	Salary
Quinn Flynn	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Name	Position	Office	Age	Start date	Salary

Keefe Bond added new tags to 💪 Design system

Message

Challenge invitation

Forms

Keefe Bond added new tags to 💪 Design system

Security

DataTables

DOM/Jquery

Column Rendering

Multiple Table Control Elements

Complex Headers With Column Visibility

Language File

Setting Defaults

Row Grouping

Footer Callback

Custom Toolbar Elements

Row Created Callback

Settings

Theme Mode

Sidebar Theme

Header color

Accent color

Sidebar Caption

Theme Layout

Layout Width

Keefe Bond added new tags to 💪 Design system

Message

Challenge invitation

Forms

Keefe Bond added new tags to 💪 Design system

Security

Carson Darrin

Advance Initialization

DataTables

DOM/Jquery

Column Rendering

Multiple Table Control Elements

Complex Headers With Column Visibility

Language File

Setting Defaults

Row Grouping

Footer Callback

Custom Toolbar Elements

Row Created Callback

Settings

Theme Mode

Sidebar Theme

Header color

Accent color

Sidebar Caption

Theme Layout

Layout Width