Basic Datatable

  1. Home
  2. Tables
  3. Basic Datatable

Zero configuration

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
NamePositionOfficeAgeStart dateSalary

Feature enable

Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
NamePositionOfficeAgeStart dateSalary

Default ordering (sorting)

With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want.

NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
NamePositionOfficeAgeStart dateSalary

Multi-column ordering

DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways.

First nameLast namePositionOfficeSalary
TigerNixonSystem ArchitectEdinburgh$320,800
GarrettWintersAccountantTokyo$170,750
AshtonCoxJunior Technical AuthorSan Francisco$86,000
CedricKellySenior Javascript DeveloperEdinburgh$433,060
AiriSatouAccountantTokyo$162,700
BrielleWilliamsonIntegration SpecialistNew York$372,000
HerrodChandlerSales AssistantSan Francisco$137,500
RhonaDavidsonIntegration SpecialistTokyo$327,900
ColleenHurstJavascript DeveloperSan Francisco$205,500
SonyaFrostSoftware EngineerEdinburgh$103,600
JenaGainesOffice ManagerLondon$90,560
QuinnFlynnSupport LeadEdinburgh$342,000
ChardeMarshallRegional DirectorSan Francisco$470,600
HaleyKennedySenior Marketing DesignerLondon$313,500
TatyanaFitzpatrickRegional DirectorLondon$385,750
MichaelSilvaMarketing DesignerLondon$198,500
PaulByrdChief Financial Officer (CFO)New York$725,000
GloriaLittleSystems AdministratorNew York$237,500
BradleyGreerSoftware EngineerLondon$132,000
DaiRiosPersonnel LeadEdinburgh$217,500

Complex headers (rowspan and colspan)

When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header, assigning the required order listeners to the TH element suitable for that column.

NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421[email protected]
Garrett WintersAccountant$170,750Tokyo8422[email protected]
Ashton CoxJunior Technical Author$86,000San Francisco1562[email protected]
Cedric KellySenior Javascript Developer$433,060Edinburgh6224[email protected]
Airi SatouAccountant$162,700Tokyo5407[email protected]
Brielle WilliamsonIntegration Specialist$372,000New York4804[email protected]
Herrod ChandlerSales Assistant$137,500San Francisco9608[email protected]
Rhona DavidsonIntegration Specialist$327,900Tokyo6200[email protected]
Colleen HurstJavascript Developer$205,500San Francisco2360[email protected]
Sonya FrostSoftware Engineer$103,600Edinburgh1667[email protected]
Jena GainesOffice Manager$90,560London3814[email protected]
Quinn FlynnSupport Lead$342,000Edinburgh9497[email protected]
Charde MarshallRegional Director$470,600San Francisco6741[email protected]
Haley KennedySenior Marketing Designer$313,500London3597[email protected]
Tatyana FitzpatrickRegional Director$385,750London1965[email protected]
Michael SilvaMarketing Designer$198,500London1581[email protected]
Paul ByrdChief Financial Officer (CFO)$725,000New York3059[email protected]
Gloria LittleSystems Administrator$237,500New York1721[email protected]
Bradley GreerSoftware Engineer$132,000London2558[email protected]
Dai RiosPersonnel Lead$217,500Edinburgh2290[email protected]
NamePositionSalaryOfficeExtn.E-mail