#### Plugin DataTable

Real power of DataTables

##### API plug-in methods

The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:

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
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575
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
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650
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

##### Ordering plug-ins (with type detection)

This example shows ordering with using an enumerated type.

Name | Position | Office | Age | Start date | Salary
--- | --- | --- | --- | --- | ---
Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | Low
Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | Low
Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | Low
Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | Medium
Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | Low
Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | Medium
Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | Low
Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | Low
Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | Low
Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | Low
Jena Gaines | Office Manager | London | 30 | 2008/12/19 | Low
Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | Low
Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | Medium
Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | Low
Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | Medium
Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | Low
Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | High
Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | Low
Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | Low
Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | Low
Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | Low
Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | High
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | Low
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | Low
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | High
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | Low
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | Medium
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | Low
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | High
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | Low
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | Low
Suki Burks | Developer | London | 53 | 2009/10/22 | Low
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | Low
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | Low
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | Low
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | Low
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | Low
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | Low
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | Medium
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | Low
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | Medium
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | Low
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | Low
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | Low
Thor Walton | Developer | New York | 61 | 2013/08/11 | Low
Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | Low
Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | Low
Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | Low
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | Low
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | Low
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | Low
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | Medium
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | Low
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | Low
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | Low
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | Low
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | Low
Name | Position | Office | Age | Start date | Salary

##### Custom filtering - range search

This example shows a search being performed on the age column in the data, based upon two inputs.

Minimum age: |
Maximum age: |

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
Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450
Doris Wilder | Sales Assistant | Sidney | 23 | 2010/09/20 | $85,600
Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000
Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575
Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650
Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850
Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000
Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000
Michelle House | Integration Specialist | Sidney | 37 | 2011/06/02 | $95,400
Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500
Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000
Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500
Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050
Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675
Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500
Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850
Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500
Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200
Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750
Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500
Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500
Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575
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
Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000
Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650
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

##### Live DOM ordering

This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.

Name | Age | Position | Office
--- | --- | --- | ---
Tiger Nixon |  |  |
Garrett Winters |  |  |
Ashton Cox |  |  |
Cedric Kelly |  |  |
Airi Satou |  |  |
Brielle Williamson |  |  |
Herrod Chandler |  |  |
Rhona Davidson |  |  |
Colleen Hurst |  |  |
Sonya Frost |  |  |
Jena Gaines |  |  |
Quinn Flynn |  |  |
Charde Marshall |  |  |
Haley Kennedy |  |  |
Tatyana Fitzpatrick |  |  |
Michael Silva |  |  |
Paul Byrd |  |  |
Gloria Little |  |  |
Bradley Greer |  |  |
Dai Rios |  |  |
Jenette Caldwell |  |  |
Yuri Berry |  |  |
Caesar Vance |  |  |
Doris Wilder |  |  |
Angelica Ramos |  |  |
Gavin Joyce |  |  |
Jennifer Chang |  |  |
Brenden Wagner |  |  |
Fiona Green |  |  |
Shou Itou |  |  |
Michelle House |  |  |
Suki Burks |  |  |
Prescott Bartlett |  |  |
Gavin Cortez |  |  |
Martena Mccray |  |  |
Unity Butler |  |  |
Howard Hatfield |  |  |
Hope Fuentes |  |  |
Vivian Harrell |  |  |
Timothy Mooney |  |  |
Jackson Bradshaw |  |  |
Olivia Liang |  |  |
Bruno Nash |  |  |
Sakura Yamamoto |  |  |
Thor Walton |  |  |
Finn Camacho |  |  |
Serge Baldwin |  |  |
Zenaida Frank |  |  |
Zorita Serrano |  |  |
Jennifer Acosta |  |  |
Cara Stevens |  |  |
Hermione Butler |  |  |
Lael Greer |  |  |
Jonas Alexander |  |  |
Shad Decker |  |  |
Michael Bruce |  |  |
Donna Snider |  |  |
Name | Age | Position | Office