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 |
|---|---|---|---|---|---|
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,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 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| 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 |
|---|---|---|---|---|---|
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| 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 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| 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.
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. | ||
| Airi Satou | Accountant | $162,700 | Tokyo | 5407 | a.satou@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 |
| Brielle Williamson | Integration Specialist | $372,000 | New York | 4804 | b.williamson@datatables.net |
| Cedric Kelly | Senior Javascript Developer | $433,060 | Edinburgh | 6224 | c.kelly@datatables.net |
| Charde Marshall | Regional Director | $470,600 | San Francisco | 6741 | c.marshall@datatables.net |
| Colleen Hurst | Javascript Developer | $205,500 | San Francisco | 2360 | c.hurst@datatables.net |
| Dai Rios | Personnel Lead | $217,500 | Edinburgh | 2290 | d.rios@datatables.net |
| Garrett Winters | Accountant | $170,750 | Tokyo | 8422 | g.winters@datatables.net |
| Gloria Little | Systems Administrator | $237,500 | New York | 1721 | g.little@datatables.net |
| Name | Position | Salary | Office | Extn. | |