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 |
---|---|---|---|---|---|
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. Need to add .complex-headers
class for styling.
Name | HR Information | Contact | |||
---|---|---|---|---|---|
Position | Salary | Office | Extn. | ||
Tiger Nixon | System Architect | $320,800 | Edinburgh | 5421 | t.nixon@datatables.net |
Garrett Winters | Accountant | $170,750 | Tokyo | 8422 | g.winters@datatables.net |
Ashton Cox | Junior Technical Author | $86,000 | San Francisco | 1562 | a.cox@datatables.net |
Cedric Kelly | Senior Javascript Developer | $433,060 | Edinburgh | 6224 | c.kelly@datatables.net |
Airi Satou | Accountant | $162,700 | Tokyo | 5407 | a.satou@datatables.net |
Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 | b.williamson@datatables.net |
Herrod Chandler | Sales Assistant | $137,500 | San Francisco | 9608 | h.chandler@datatables.net |
Rhona Davidson | Integration Specialist | $327,900 | Tokyo | 6200 | r.davidson@datatables.net |
Colleen Hurst | Javascript Developer | $205,500 | San Francisco | 2360 | c.hurst@datatables.net |
Sonya Frost | Software Engineer | $103,600 | Edinburgh | 1667 | s.frost@datatables.net |
Jena Gaines | Office Manager | $90,560 | London | 3814 | j.gaines@datatables.net |
Quinn Flynn | Support Lead | $342,000 | Edinburgh | 9497 | q.flynn@datatables.net |
Charde Marshall | Regional Director | $470,600 | San Francisco | 6741 | c.marshall@datatables.net |
Haley Kennedy | Senior Marketing Designer | $313,500 | London | 3597 | h.kennedy@datatables.net |
Tatyana Fitzpatrick | Regional Director | $385,750 | London | 1965 | t.fitzpatrick@datatables.net |
Michael Silva | Marketing Designer | $198,500 | London | 1581 | m.silva@datatables.net |
Paul Byrd | Chief Financial Officer (CFO) | $725,000 | New York | 3059 | p.byrd@datatables.net |
Gloria Little | Systems Administrator | $237,500 | New York | 1721 | g.little@datatables.net |
Bradley Greer | Software Engineer | $132,000 | London | 2558 | b.greer@datatables.net |
Dai Rios | Personnel Lead | $217,500 | Edinburgh | 2290 | d.rios@datatables.net |
Jenette Caldwell | Development Lead | $345,000 | New York | 1937 | j.caldwell@datatables.net |
Yuri Berry | Chief Marketing Officer (CMO) | $675,000 | New York | 6154 | y.berry@datatables.net |
Caesar Vance | Pre-Sales Support | $106,450 | New York | 8330 | c.vance@datatables.net |
Doris Wilder | Sales Assistant | $85,600 | Sidney | 3023 | d.wilder@datatables.net |
Angelica Ramos | Chief Executive Officer (CEO) | $1,200,000 | London | 5797 | a.ramos@datatables.net |
Gavin Joyce | Developer | $92,575 | Edinburgh | 8822 | g.joyce@datatables.net |
Jennifer Chang | Regional Director | $357,650 | Singapore | 9239 | j.chang@datatables.net |
Brenden Wagner | Software Engineer | $206,850 | San Francisco | 1314 | b.wagner@datatables.net |
Fiona Green | Chief Operating Officer (COO) | $850,000 | San Francisco | 2947 | f.green@datatables.net |
Shou Itou | Regional Marketing | $163,000 | Tokyo | 8899 | s.itou@datatables.net |
Michelle House | Integration Specialist | $95,400 | Sidney | 2769 | m.house@datatables.net |
Suki Burks | Developer | $114,500 | London | 6832 | s.burks@datatables.net |
Prescott Bartlett | Technical Author | $145,000 | London | 3606 | p.bartlett@datatables.net |
Gavin Cortez | Team Leader | $235,500 | San Francisco | 2860 | g.cortez@datatables.net |
Martena Mccray | Post-Sales support | $324,050 | Edinburgh | 8240 | m.mccray@datatables.net |
Unity Butler | Marketing Designer | $85,675 | San Francisco | 5384 | u.butler@datatables.net |
Howard Hatfield | Office Manager | $164,500 | San Francisco | 7031 | h.hatfield@datatables.net |
Hope Fuentes | Secretary | $109,850 | San Francisco | 6318 | h.fuentes@datatables.net |
Vivian Harrell | Financial Controller | $452,500 | San Francisco | 9422 | v.harrell@datatables.net |
Timothy Mooney | Office Manager | $136,200 | London | 7580 | t.mooney@datatables.net |
Jackson Bradshaw | Director | $645,750 | New York | 1042 | j.bradshaw@datatables.net |
Olivia Liang | Support Engineer | $234,500 | Singapore | 2120 | o.liang@datatables.net |
Bruno Nash | Software Engineer | $163,500 | London | 6222 | b.nash@datatables.net |
Sakura Yamamoto | Support Engineer | $139,575 | Tokyo | 9383 | s.yamamoto@datatables.net |
Thor Walton | Developer | $98,540 | New York | 8327 | t.walton@datatables.net |
Finn Camacho | Support Engineer | $87,500 | San Francisco | 2927 | f.camacho@datatables.net |
Serge Baldwin | Data Coordinator | $138,575 | Singapore | 8352 | s.baldwin@datatables.net |
Zenaida Frank | Software Engineer | $125,250 | New York | 7439 | z.frank@datatables.net |
Zorita Serrano | Software Engineer | $115,000 | San Francisco | 4389 | z.serrano@datatables.net |
Jennifer Acosta | Junior Javascript Developer | $75,650 | Edinburgh | 3431 | j.acosta@datatables.net |
Cara Stevens | Sales Assistant | $145,600 | New York | 3990 | c.stevens@datatables.net |
Hermione Butler | Regional Director | $356,250 | London | 1016 | h.butler@datatables.net |
Lael Greer | Systems Administrator | $103,500 | London | 6733 | l.greer@datatables.net |
Jonas Alexander | Developer | $86,500 | San Francisco | 8196 | j.alexander@datatables.net |
Shad Decker | Regional Director | $183,000 | Edinburgh | 6373 | s.decker@datatables.net |
Michael Bruce | Javascript Developer | $183,000 | Singapore | 5384 | m.bruce@datatables.net |
Donna Snider | Customer Support | $112,000 | New York | 4226 | d.snider@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 |
---|---|---|---|---|---|
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 | t.nixon@datatables.net |
Garrett | Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 | 8422 | g.winters@datatables.net |
Ashton | Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 | 1562 | a.cox@datatables.net |
Cedric | Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 | 6224 | c.kelly@datatables.net |
Airi | Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 | 5407 | a.satou@datatables.net |
Brielle | Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 | 4804 | b.williamson@datatables.net |
Herrod | Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 | 9608 | h.chandler@datatables.net |
Rhona | Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 | 6200 | r.davidson@datatables.net |
Colleen | Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 | 2360 | c.hurst@datatables.net |
Sonya | Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 | 1667 | s.frost@datatables.net |
Jena | Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 | 3814 | j.gaines@datatables.net |
Quinn | Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 | 9497 | q.flynn@datatables.net |
Charde | Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 | 6741 | c.marshall@datatables.net |
Haley | Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 | 3597 | h.kennedy@datatables.net |
Tatyana | Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 | 1965 | t.fitzpatrick@datatables.net |
Michael | Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 | 1581 | m.silva@datatables.net |
Paul | Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 | 3059 | p.byrd@datatables.net |
Gloria | Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 | 1721 | g.little@datatables.net |
Bradley | Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 | 2558 | b.greer@datatables.net |
Dai | Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 | 2290 | d.rios@datatables.net |
Jenette | Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 | 1937 | j.caldwell@datatables.net |
Yuri | Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 | 6154 | y.berry@datatables.net |
Caesar | Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 | 8330 | c.vance@datatables.net |
Doris | Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600 | 3023 | d.wilder@datatables.net |
Angelica | Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 | 5797 | a.ramos@datatables.net |
Gavin | Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 | 8822 | g.joyce@datatables.net |
Jennifer | Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 | 9239 | j.chang@datatables.net |
Martena | Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 | 8240 | m.mccray@datatables.net |
Unity | Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 | 5384 | u.butler@datatables.net |
Howard | Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 | 7031 | h.hatfield@datatables.net |
Hope | Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 | 6318 | h.fuentes@datatables.net |
Vivian | Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 | 9422 | v.harrell@datatables.net |
Timothy | Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 | 7580 | t.mooney@datatables.net |
Jackson | Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 | 1042 | j.bradshaw@datatables.net |
Olivia | Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 | 2120 | o.liang@datatables.net |
Bruno | Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 | 6222 | b.nash@datatables.net |
Sakura | Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 | 9383 | s.yamamoto@datatables.net |
Thor | Walton | Developer | New York | 61 | 2013/08/11 | $98,540 | 8327 | t.walton@datatables.net |
Finn | Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 | 2927 | f.camacho@datatables.net |
Serge | Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 | 8352 | s.baldwin@datatables.net |
Zenaida | Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 | 7439 | z.frank@datatables.net |
Zorita | Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 | 4389 | z.serrano@datatables.net |
Jennifer | Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 | 3431 | j.acosta@datatables.net |
Cara | Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 | 3990 | c.stevens@datatables.net |
Hermione | Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 | 1016 | h.butler@datatables.net |
Lael | Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 | 6733 | l.greer@datatables.net |
Jonas | Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 | 8196 | j.alexander@datatables.net |
Shad | Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 | 6373 | s.decker@datatables.net |
Michael | Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 | 5384 | m.bruce@datatables.net |
Donna | Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 | 4226 | d.snider@datatables.net |