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. E-mail
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
Name Position Salary Office Extn. E-mail
© 2018 All rights reserved. Template designed by Prince