Advance Initialization

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 SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/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)AccountantTokyo2008/11/28$162,700
Ashton Cox (66)Junior Technical AuthorSan Francisco2009/01/12$86,000
Bradley Greer (41)Software EngineerLondon2012/10/13$132,000
Brielle Williamson (61)Integration SpecialistNew York2012/12/02$372,000
Cedric Kelly (22)Senior Javascript DeveloperEdinburgh2012/03/29$433,060
Charde Marshall (36)Regional DirectorSan Francisco2008/10/16$470,600
Colleen Hurst (39)Javascript DeveloperSan Francisco2009/09/15$205,500
Dai Rios (35)Personnel LeadEdinburgh2012/09/26$217,500
Garrett Winters (63)AccountantTokyo2011/07/25$170,750
Gloria Little (59)Systems AdministratorNew York2009/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 SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/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 SatouAccountantTokyo332008/11/28
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12
Bradley GreerSoftware EngineerLondon412012/10/13
Brielle WilliamsonIntegration SpecialistNew York612012/12/02
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29
Charde MarshallRegional DirectorSan Francisco362008/10/16
Colleen HurstJavascript DeveloperSan Francisco392009/09/15
Dai RiosPersonnel LeadEdinburgh352012/09/26
Garrett WintersAccountantTokyo632011/07/25
Gloria LittleSystems AdministratorNew York592009/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
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
NamePositionOfficeAgeStart dateSalary
1 bis 10 von 20 Einträgen
Setting Defaults
When working with DataTables over multiple pages it is often useful to set the initialization defaults to common values
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/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 FlynnSystem Architect612011/04/25$320,800
Cedric KellySenior Javascript Developer222012/03/29$433,060
Sonya FrostSoftware Engineer232008/12/13$103,600
Quinn FlynnSupport Lead222013/03/03$342,000
Dai RiosPersonnel Lead352012/09/26$217,500
London
Jena GainesOffice Manager302008/12/19$90,560
Haley KennedySenior Marketing Designer432012/12/18$313,500
Tatyana FitzpatrickRegional Director192010/03/17$385,750
Michael SilvaMarketing Designer662012/11/27$198,500
Bradley GreerSoftware Engineer412012/10/13$132,000
New York
Brielle WilliamsonIntegration Specialist612012/12/02$372,000
Paul ByrdChief Financial Officer (CFO)642010/06/09$725,000
Gloria LittleSystems Administrator592009/04/10$237,500
San Francisco
Ashton CoxJunior Technical Author662009/01/12$86,000
Herrod ChandlerSales Assistant592012/08/06$137,500
Colleen HurstJavascript Developer392009/09/15$205,500
Charde MarshallRegional Director362008/10/16$470,600
Tokyo
Garrett WintersAccountant632011/07/25$170,750
Airi SatouAccountant332008/11/28$162,700
Rhona DavidsonIntegration Specialist552010/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 SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/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 SatouAccountantTokyo332008/11/28$162,700
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Garrett WintersAccountantTokyo632011/07/25$170,750
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 20 entries
Settings
Theme Mode

Light / Dark / System

  • Sidebar theme

    Dark / Light

  • Sidebar Caption

    Show / Hide

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed

  • Custom Theme

    Choose your primary theme color

  • Header Theme

    Choose your Header theme color

  • Navbar Theme

    Choose your Navbar theme color

  • Logo Theme

    Choose your Logo theme color

  • Navbar Caption Color

    Choose your Navbar Caption Color

  • Navbar Image

    Choose your Navbar Background Image

  • Dropdown Menu Icon

    Choose your Dropdown Menu Icon

  • Dropdown Menu Link Icon

    Choose your Dropdown Menu Link Icon