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.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 20 entries
Column Rendering
This example shows the person's age combined with their name in the first column, hiding the age column.
NamePositionOfficeStart dateSalary
Airi Satou (33) Accountant Tokyo 2008/11/28 $162,700
Ashton Cox (66) Junior Technical Author San Francisco 2009/01/12 $86,000
Bradley Greer (41) Software Engineer London 2012/10/13 $132,000
Brielle Williamson (61) Integration Specialist New York 2012/12/02 $372,000
Cedric Kelly (22) Senior Javascript Developer Edinburgh 2012/03/29 $433,060
Charde Marshall (36) Regional Director San Francisco 2008/10/16 $470,600
Colleen Hurst (39) Javascript Developer San Francisco 2009/09/15 $205,500
Dai Rios (35) Personnel Lead Edinburgh 2012/09/26 $217,500
Garrett Winters (63) Accountant Tokyo 2011/07/25 $170,750
Gloria Little (59) Systems Administrator New York 2009/04/10 $237,500
NamePositionOfficeStart dateSalary
Showing 1 to 10 of 20 entries
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.
Showing 1 to 10 of 20 entries
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 20 entries
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.
NameHR InformationContact
PositionSalaryOfficeExtn.
Airi Satou Accountant Tokyo 33 2008/11/28
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12
Bradley Greer Software Engineer London 41 2012/10/13
Brielle Williamson Integration Specialist New York 61 2012/12/02
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29
Charde Marshall Regional Director San Francisco 36 2008/10/16
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15
Dai Rios Personnel Lead Edinburgh 35 2012/09/26
Garrett Winters Accountant Tokyo 63 2011/07/25
Gloria Little Systems Administrator New York 59 2009/04/10
NamePositionSalaryOfficeExtn.
Showing 1 to 10 of 20 entries
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
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 20 entries
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.
NamePositionAgeStart dateSalary
Edinburgh
Quinn Flynn System Architect 61 2011/04/25 $320,800
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Dai Rios Personnel Lead 35 2012/09/26 $217,500
London
Jena Gaines Office Manager 30 2008/12/19 $90,560
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750
Michael Silva Marketing Designer 66 2012/11/27 $198,500
Bradley Greer Software Engineer 41 2012/10/13 $132,000
New York
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Paul Byrd Chief Financial Officer (CFO) 64 2010/06/09 $725,000
Gloria Little Systems Administrator 59 2009/04/10 $237,500
San Francisco
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Colleen Hurst Javascript Developer 39 2009/09/15 $205,500
Charde Marshall Regional Director 36 2008/10/16 $470,600
Tokyo
Garrett Winters Accountant 63 2011/07/25 $170,750
Airi Satou Accountant 33 2008/11/28 $162,700
Rhona Davidson Integration Specialist 55 2010/10/14 $327,900
NamePositionAgeStart dateSalary
Showing 1 to 20 of 20 entries
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.
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
Custom tool bar! Text/images etc.
First nameLast nameOfficeageDOBSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Total:
Showing 1 to 10 of 20 entries
Row Created Callback
The following example shows how a callback function can be used to format a particular row at draw time.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 20 entries
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Sidebar Theme

    Choose Sidebar Theme

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout