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 tables is to call the construction function:$().DataTable();.
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
Paul Byrd | Chief Financial Officer(CFO) | New York | 64 | 2010/06/09 | $725,000 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Yuri Berry | Chief Marketing Officer(CMO) | New York | 40 | 2009/06/25 | $675,000 |
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
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 | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 |
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400 |
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
Name | Position | Office | 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.
Name | HR Information | Contact | |||
---|---|---|---|---|---|
Position | Salary | Office | Extn. | ||
Tiger Nixon | System Architect | $320,800 | Edinburgh | 5421 | [email protected] |
Garrett Winters | Accountant | $170,750 | Tokyo | 8422 | [email protected] |
Ashton Cox | Junior Technical Author | $86,000 | San Francisco | 1562 | [email protected] |
Cedric Kelly | Senior Javascript Developer | $433,060 | Edinburgh | 6224 | [email protected] |
Airi Satou | Accountant | $162,700 | Tokyo | 5407 | [email protected] |
Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 | [email protected] |
Herrod Chandler | Sales Assistant | $137,500 | San Francisco | 9608 | [email protected] |
Rhona Davidson | Integration Specialist | $327,900 | Tokyo | 6200 | [email protected] |
Colleen Hurst | Javascript Developer | $205,500 | San Francisco | 2360 | [email protected] |
Sonya Frost | Software Engineer | $103,600 | Edinburgh | 1667 | [email protected] |
Jena Gaines | Office Manager | $90,560 | London | 3814 | [email protected] |
Quinn Flynn | Support Lead | $342,000 | Edinburgh | 9497 | [email protected] |
Charde Marshall | Regional Director | $470,600 | San Francisco | 6741 | [email protected] |
Haley Kennedy | Senior Marketing Designer | $313,500 | London | 3597 | [email protected] |
Tatyana Fitzpatrick | Regional Director | $385,750 | London | 1965 | [email protected] |
Michael Silva | Marketing Designer | $198,500 | London | 1581 | [email protected] |
Paul Byrd | Chief Financial Officer(CFO) | $725,000 | New York | 3059 | [email protected] |
Gloria Little | Systems Administrator | $237,500 | New York | 1721 | [email protected] |
Bradley Greer | Software Engineer | $132,000 | London | 2558 | [email protected] |
Dai Rios | Personnel Lead | $217,500 | Edinburgh | 2290 | [email protected] |
Jenette Caldwell | Development Lead | $345,000 | New York | 1937 | [email protected] |
Yuri Berry | Chief Marketing Officer(CMO) | $675,000 | New York | 6154 | [email protected] |
Caesar Vance | Pre-Sales Support | $106,450 | New York | 8330 | [email protected] |
Doris Wilder | Sales Assistant | $85,600 | Sidney | 3023 | [email protected] |
Angelica Ramos | Chief Executive Officer(CEO) | $1,200,000 | London | 5797 | [email protected] |
Gavin Joyce | Developer | $92,575 | Edinburgh | 8822 | [email protected] |
Jennifer Chang | Regional Director | $357,650 | Singapore | 9239 | [email protected] |
Brenden Wagner | Software Engineer | $206,850 | San Francisco | 1314 | [email protected] |
Fiona Green | Chief Operating Officer(COO) | $850,000 | San Francisco | 2947 | [email protected] |
Shou Itou | Regional Marketing | $163,000 | Tokyo | 8899 | [email protected] |
Michelle House | Integration Specialist | $95,400 | Sidney | 2769 | [email protected] |
Suki Burks | Developer | $114,500 | London | 6832 | [email protected] |
Prescott Bartlett | Technical Author | $145,000 | London | 3606 | [email protected] |
Gavin Cortez | Team Leader | $235,500 | San Francisco | 2860 | [email protected] |
Martena Mccray | Post-Sales support | $324,050 | Edinburgh | 8240 | [email protected] |
Unity Butler | Marketing Designer | $85,675 | San Francisco | 5384 | [email protected] |
Howard Hatfield | Office Manager | $164,500 | San Francisco | 7031 | [email protected] |
Hope Fuentes | Secretary | $109,850 | San Francisco | 6318 | [email protected] |
Vivian Harrell | Financial Controller | $452,500 | San Francisco | 9422 | [email protected] |
Timothy Mooney | Office Manager | $136,200 | London | 7580 | [email protected] |
Jackson Bradshaw | Director | $645,750 | New York | 1042 | [email protected] |
Olivia Liang | Support Engineer | $234,500 | Singapore | 2120 | [email protected] |
Bruno Nash | Software Engineer | $163,500 | London | 6222 | [email protected] |
Sakura Yamamoto | Support Engineer | $139,575 | Tokyo | 9383 | [email protected] |
Thor Walton | Developer | $98,540 | New York | 8327 | [email protected] |
Finn Camacho | Support Engineer | $87,500 | San Francisco | 2927 | [email protected] |
Serge Baldwin | Data Coordinator | $138,575 | Singapore | 8352 | [email protected] |
Zenaida Frank | Software Engineer | $125,250 | New York | 7439 | [email protected] |
Zorita Serrano | Software Engineer | $115,000 | San Francisco | 4389 | [email protected] |
Jennifer Acosta | Junior Javascript Developer | $75,650 | Edinburgh | 3431 | [email protected] |
Cara Stevens | Sales Assistant | $145,600 | New York | 3990 | [email protected] |
Hermione Butler | Regional Director | $356,250 | London | 1016 | [email protected] |
Lael Greer | Systems Administrator | $103,500 | London | 6733 | [email protected] |
Jonas Alexander | Developer | $86,500 | San Francisco | 8196 | [email protected] |
Shad Decker | Regional Director | $183,000 | Edinburgh | 6373 | [email protected] |
Michael Bruce | Javascript Developer | $183,000 | Singapore | 5384 | [email protected] |
Donna Snider | Customer Support | $112,000 | New York | 4226 | [email protected] |
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 |
---|---|---|---|---|---|
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
Paul Byrd | Chief Financial Officer(CFO) | New York | 64 | 2010/06/09 | $725,000 |
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
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.
First name | Last name | Position | Office | Age | Start date | Salary | Extn. | |
---|---|---|---|---|---|---|---|---|
Tiger | Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 | 5421 | [email protected] |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | [email protected] |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | [email protected] |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | [email protected] |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | [email protected] |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | [email protected] |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | [email protected] |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 | 6200 | [email protected] |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 | 2360 | [email protected] |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | [email protected] |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | [email protected] |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | [email protected] |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | [email protected] |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 | 3597 | [email protected] |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | [email protected] |
Michael | Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 | 1581 | [email protected] |
Paul | Byrd | Chief Financial Officer(CFO) | New York | 64 | 2010/06/09 | $725,000 | 3059 | [email protected] |
Gloria | Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 | 1721 | [email protected] |
Bradley | Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 | 2558 | [email protected] |
Dai | Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 | 2290 | [email protected] |
Jenette | Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 | 1937 | [email protected] |
Yuri | Berry | Chief Marketing Officer(CMO) | New York | 40 | 2009/06/25 | $675,000 | 6154 | [email protected] |
Caesar | Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 | 8330 | [email protected] |
Doris | Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 | 3023 | [email protected] |
Angelica | Ramos | Chief Executive Officer(CEO) | London | 47 | 2009/10/09 | $1,200,000 | 5797 | [email protected] |
Gavin | Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 | 8822 | [email protected] |
Jennifer | Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 | 9239 | [email protected] |
Martena | Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 | 8240 | [email protected] |
Unity | Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 | 5384 | [email protected] |
Howard | Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 | 7031 | [email protected] |
Hope | Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 | 6318 | [email protected] |
Vivian | Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 | 9422 | [email protected] |
Timothy | Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 | 7580 | [email protected] |
Jackson | Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 | 1042 | [email protected] |
Olivia | Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 | 2120 | [email protected] |
Bruno | Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 | 6222 | [email protected] |
Sakura | Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 | 9383 | [email protected] |
Thor | Walton | Developer | New York | 61 | 2013/08/11 | $98,540 | 8327 | [email protected] |
Finn | Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 | 2927 | [email protected] |
Serge | Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 | 8352 | [email protected] |
Zenaida | Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 | 7439 | [email protected] |
Zorita | Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 | 4389 | [email protected] |
Jennifer | Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 | 3431 | [email protected] |
Cara | Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 | 3990 | [email protected] |
Hermione | Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 | 1016 | [email protected] |
Lael | Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 | 6733 | [email protected] |
Jonas | Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 | 8196 | [email protected] |
Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 | [email protected] |
Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 | [email protected] |
Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 | [email protected] |