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();.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
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 |
Name | Position | Office | Age | Start date | Salary |
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.
Name | Position | Age | Start date | Salary |
---|---|---|---|---|
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 |
Name | Position | Age | Start date | Salary |
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.
Name | HR Information | Contact | |||
---|---|---|---|---|---|
Position | Salary | Office | Extn. | ||
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 |
Name | Position | Salary | Office | Extn. |
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 1 | Column 2 | Column 3 | Column 4 | Column 5 |
---|---|---|---|---|
1.1 | 1.2 | 1.3 | 1.4 | 1.5 |
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
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.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
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 |
Name | Position | Office | Age | Start date | Salary |
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.