Basic Datatable
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 |
| Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
| Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
| Name | Position | Office | Age | Start date | Salary |
Feature enable
Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object.
| 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 |
| Name | Position | Office | Age | Start date | Salary |
Default ordering (sorting)
With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want.
| 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 |
| Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
| Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
| Name | Position | Office | Age | Start date | Salary |
Multi-column ordering
DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways.
| First name | Last name | Position | Office | Salary |
|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | $320,800 |
| Garrett | Winters | Accountant | Tokyo | $170,750 |
| Ashton | Cox | Junior Technical Author | San Francisco | $86,000 |
| Cedric | Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| Airi | Satou | Accountant | Tokyo | $162,700 |
| Brielle | Williamson | Integration Specialist | New York | $372,000 |
| Herrod | Chandler | Sales Assistant | San Francisco | $137,500 |
| Rhona | Davidson | Integration Specialist | Tokyo | $327,900 |
| Colleen | Hurst | Javascript Developer | San Francisco | $205,500 |
| Sonya | Frost | Software Engineer | Edinburgh | $103,600 |
| Jena | Gaines | Office Manager | London | $90,560 |
| Quinn | Flynn | Support Lead | Edinburgh | $342,000 |
| Charde | Marshall | Regional Director | San Francisco | $470,600 |
| Haley | Kennedy | Senior Marketing Designer | London | $313,500 |
| Tatyana | Fitzpatrick | Regional Director | London | $385,750 |
| Michael | Silva | Marketing Designer | London | $198,500 |
| Paul | Byrd | Chief Financial Officer (CFO) | New York | $725,000 |
| Gloria | Little | Systems Administrator | New York | $237,500 |
| Bradley | Greer | Software Engineer | London | $132,000 |
| Dai | Rios | Personnel Lead | Edinburgh | $217,500 |
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 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] |
| Name | Position | Salary | Office | Extn. | |