Read full documnetation here

Zero configuration

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

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
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
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
Donna Snider Customer Support New York 27 2011/01/25 $112,000
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 29 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 Support Lead 22 2013/03/03 $342,000
Martena Mccray Post-Sales support 46 2011/03/09 $324,050
London
Jena Gaines Office Manager 30 2008/12/19 $90,560
Prescott Bartlett Technical Author 27 2011/05/07 $145,000
New York
Gloria Little Systems Administrator 59 2009/04/10 $237,500
Jenette Caldwell Development Lead 30 2011/09/03 $345,000
Sidney
Doris Wilder Sales Assistant 23 2010/09/20 $85,600
Michelle House Integration Specialist 37 2011/06/02 $95,400
Singapore
Jennifer Chang Regional Director 28 2010/11/14 $357,650
Tokyo
Shou Itou Regional Marketing 20 2011/08/14 $163,000
NamePositionAgeStart dateSalary
Showing 1 to 10 of 10 entries

Complex headers

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. Need to add .complex-headers class for styling.

NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
Airi Satou Accountant $162,700 Tokyo 5407 a.satou@datatables.net
Angelica Ramos Chief Executive Officer (CEO) $1,200,000 London 5797 a.ramos@datatables.net
Ashton Cox Junior Technical Author $86,000 San Francisco 1562 a.cox@datatables.net
Bradley Greer Software Engineer $132,000 London 2558 b.greer@datatables.net
Brenden Wagner Software Engineer $206,850 San Francisco 1314 b.wagner@datatables.net
Brielle Williamson Integration Specialist $372,000 New York 4804 b.williamson@datatables.net
Bruno Nash Software Engineer $163,500 London 6222 b.nash@datatables.net
Caesar Vance Pre-Sales Support $106,450 New York 8330 c.vance@datatables.net
Cara Stevens Sales Assistant $145,600 New York 3990 c.stevens@datatables.net
Cedric Kelly Senior Javascript Developer $433,060 Edinburgh 6224 c.kelly@datatables.net
NamePositionSalaryOfficeExtn.E-mail
Showing 1 to 10 of 57 entries

Add rows

New rows can be added to a DataTable very easily using the ( row.add() ) API method. Simply call the API function with the data that is to be used for the new row (be it an array or object). Multiple rows can be added using the ( rows.add() ) method (note the plural). Data can be likewise be updated with the ( row().data() and row().remove() methods. )

Column 1Column 2Column 3Column 4Column 5
1.1 1.2 1.3 1.4 1.5
Column 1Column 2Column 3Column 4Column 5
Showing 1 to 1 of 1 entries

Column selectors with Export and Print Options

All of the data export buttons have a exportOptions option which can be used to specify information about what data should be exported and how. The options given for this parameter are passed directly to the buttons.exportData() method to obtain the required data.

The print button will open a new window in the end user's browser and, by default, automatically trigger the print function allowing the end user to print the table. The window will be closed once the print is complete, or has been cancelled.

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
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 27 entries

Scroll - horizontal and vertical

In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.