• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Basic DataTables

  2. Data Tables
  3. Basic DataTables

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();.Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.
NamePositionOfficeAgeStart dateSalaryAction
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
Donna SniderCustomer SupportNew York272011/01/25$112,000

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 androwspan in the table's header, assigning the required order listeners to the TH element suitable for that column.Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if found. The orderCellsTop:optionoption can be used to tell DataTables to use the top cell if you prefer.The example shown below has two sets of grouped information, grouped by colspan in the header.
NameHR InformationContact
PositionSalaryOfficeCVStatusE-mailAction
Tiger NixonSystem Architect$320,800Edinburgh hiredt.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo Pendingg.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco in processa.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh in processc.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo hireda.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York Pendingb.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco in processh.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo hiredr.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco Pendingc.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh in processs.frost@datatables.net
Jena GainesOffice Manager$90,560London hiredj.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh in processq.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco in processc.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London hiredh.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London Pendingt.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London in processm.silva@datatables.net
Paul ByrdChief Financial Officer (CFO)$725,000New York in processp.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York hiredg.little@datatables.net
Bradley GreerSoftware Engineer$132,000London Pendingb.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh in processd.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York hiredj.caldwell@datatables.net
Yuri BerryChief Marketing Officer (CMO)$675,000New York Pendingy.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York in processc.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney hiredd.wilder@datatables.net
Angelica RamosChief Executive Officer (CEO)$1,200,000London Pendinga.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh in processg.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore hiredj.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco hiredb.wagner@datatables.net
Fiona GreenChief Operating Officer (COO)$850,000San Francisco Pendingf.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo in processs.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney hiredm.house@datatables.net
Suki BurksDeveloper$114,500London Pendings.burks@datatables.net
Prescott BartlettTechnical Author$145,000London in processp.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco hiredg.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh hiredm.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco Pendingu.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco in processh.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco hiredh.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco Pendingv.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London in processt.mooney@datatables.net
Jackson BradshawDirector$645,750New York hiredj.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore Pendingo.liang@datatables.net
Bruno NashSoftware Engineer$163,500London in processb.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo Pendings.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York in processt.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco hiredf.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore Pendings.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York in processz.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco hiredz.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh Pendingj.acosta@datatables.net
Cara StevensSales Assistant$145,600New York in processc.stevens@datatables.net
Hermione ButlerRegional Director$356,250London hiredh.butler@datatables.net
Lael GreerSystems Administrator$103,500London Pendingl.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco in processj.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh hireds.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore hiredm.bruce@datatables.net
Donna SniderCustomer Support$112,000New York hiredd.snider@datatables.net
NamePositionSalaryOfficeCV StatusE-mailAction

State saving

DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave option.The built in state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. Please note that this means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs. Alternative options of using cookies or saving the state on the server through Ajax can be used through the stateSaveCallback and stateLoadCallback options.The duration for which the saved state is valid and can be used to restore the table state can be set using the stateDuration initialisation parameter (2 hours by default). This parameter also controls if localStorage (0 or greater) or sessionStorage (-1) is used to store the data.The example below simply shows state saving enabled in DataTables with the stateSave option.
NamePositionOfficeAgeStart dateSalaryAction
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
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalaryAction

Scroll - vertical, dynamic height

This example shows a vertically scrolling DataTable that makes use of the CSS3 vh unit in order to dynamically resize the viewport based on the browser window height. The vh unit is effectively a percentage of the browser window height. So the 50vh used in this example is 50% of the window height. The viewport size will update dynamically as the window is resized.A relatively modern browser is required for vh units to operate correctly. IE9+ supports the vh unit and all other evergreen browsers.
NamePositionOfficeAgeStart dateSalaryAction
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
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary