- var datatable = true; - var page_datatable = true; - var theme_customizer = true; - var tooltip = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | API DataTables ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Data Tables li.breadcrumb-item.active API .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row // Add rows Starts .col-sm-12 .card .card-header h5 Add rows span | New rows can be added to a DataTable using the code.api(title='DataTables API method') row.add() | API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows | can be added using the code.api(title='DataTables API method') rows.add() | method (note | the plural). Data can likewise be updated with the code.api(title='DataTables API method') row().data() | and code.api(title='DataTables API method') row().remove() | methods. span | Note that in order to see the new row in the table you must call the code.api(title='DataTables API method') draw() | method, which is easily done through the chaining that the DataTables API employs. .card-body button#addRow.btn.btn-primary.mb-3 Add new row .table-responsive table#API-1.display thead tr th Column 1 th Column 2 th Column 3 th Column 4 th Column 5 tfoot tr th Column 1 th Column 2 th Column 3 th Column 4 th Column 5 // Add rows Ends // Individual column searching (text inputs) Starts .col-sm-12 .card .card-header h5 Individual column searching (text inputs) span | The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may wish to present controls that search on specific columns. .card-body .table-responsive table#API-2.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Individual column searching (text inputs) Ends // Individual column searching (select inputs) Starts .col-sm-12 .card .card-header h5 Individual column searching (select inputs) .card-body .table-responsive table#API-3.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Individual column searching (select inputs) Ends // Child rows (show extra / detailed information) Starts .col-sm-12 .card .card-header h5 Child rows (show extra / detailed information) span | The DataTables API has a number of methods for attaching child rows to a parent row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table. .card-body .table-responsive table#API-chield-row.display thead tr th th Name th Position th Office th Salary tfoot tr th th Name th Position th Office th Salary // Child rows (show extra / detailed information) Ends // Row selection (multiple rows) Starts .col-sm-12 .card .card-header h5 Row selection (multiple rows) span | It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the | table rows. The code.api(title='DataTables API method') rows().data() | method can then | be used to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be | developed. .card-body .table-responsive button#multiple-row-select-btn.btn.btn-primary.mb-3 Row count table#row-select-multiple.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Row selection (multiple rows) Ends // Row Selection And Deletion (Single Row) Starts .col-sm-12 .card .card-header h5 Row Selection And Deletion (Single Row) span | It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the | table rows. The code.api(title='DataTables API method') rows().data() | method can then | be used to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be | developed. .card-body .table-responsive button#single-row-delete-btn.btn.btn-secondary.mb-3 Delete Row table#row-select-delete.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Row Selection And Deletion (Single Row) Ends // Form Inputs datatable Starts .col-sm-12 .card .card-header h5 Form Inputs span | It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the | table rows. The code.api(title='DataTables API method') rows().data() | method can then | be used to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be | developed. .card-body .table-responsive button#form-input-datatable-submit.btn.btn-primary.mb-3 Submit Form table#form-input-datatable.table.table-striped.table-bordered.nowrap thead tr th Name th Age th Position th Office tbody tr td Tiger Nixon td input#row-1-age.form-control(type='text', name='row-1-age', value='61') td input#row-1-position.form-control(type='text', name='row-1-position', value='System Architect') td select#row-1-office.form-control(size='1', name='row-1-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Garrett Winters td input#row-2-age.form-control(type='text', name='row-2-age', value='63') td input#row-2-position.form-control(type='text', name='row-2-position', value='Accountant') td select#row-2-office.form-control(size='1', name='row-2-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Ashton Cox td input#row-3-age.form-control(type='text', name='row-3-age', value='66') td input#row-3-position.form-control(type='text', name='row-3-position', value='Junior Technical Author') td select#row-3-office.form-control(size='1', name='row-3-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Cedric Kelly td input#row-4-age.form-control(type='text', name='row-4-age', value='22') td input#row-4-position.form-control(type='text', name='row-4-position', value='Senior Javascript Developer') td select#row-4-office.form-control(size='1', name='row-4-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Airi Satou td input#row-5-age.form-control(type='text', name='row-5-age', value='33') td input#row-5-position.form-control(type='text', name='row-5-position', value='Accountant') td select#row-5-office.form-control(size='1', name='row-5-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Brielle Williamson td input#row-6-age.form-control(type='text', name='row-6-age', value='61') td input#row-6-position.form-control(type='text', name='row-6-position', value='Integration Specialist') td select#row-6-office.form-control(size='1', name='row-6-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Herrod Chandler td input#row-7-age.form-control(type='text', name='row-7-age', value='59') td input#row-7-position.form-control(type='text', name='row-7-position', value='Sales Assistant') td select#row-7-office.form-control(size='1', name='row-7-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Rhona Davidson td input#row-8-age.form-control(type='text', name='row-8-age', value='55') td input#row-8-position.form-control(type='text', name='row-8-position', value='Integration Specialist') td select#row-8-office.form-control(size='1', name='row-8-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Colleen Hurst td input#row-9-age.form-control(type='text', name='row-9-age', value='39') td input#row-9-position.form-control(type='text', name='row-9-position', value='Javascript Developer') td select#row-9-office.form-control(size='1', name='row-9-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Sonya Frost td input#row-10-age.form-control(type='text', name='row-10-age', value='23') td input#row-10-position.form-control(type='text', name='row-10-position', value='Software Engineer') td select#row-10-office.form-control(size='1', name='row-10-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jena Gaines td input#row-11-age.form-control(type='text', name='row-11-age', value='30') td input#row-11-position.form-control(type='text', name='row-11-position', value='Office Manager') td select#row-11-office.form-control(size='1', name='row-11-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Quinn Flynn td input#row-12-age.form-control(type='text', name='row-12-age', value='22') td input#row-12-position.form-control(type='text', name='row-12-position', value='Support Lead') td select#row-12-office.form-control(size='1', name='row-12-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Charde Marshall td input#row-13-age.form-control(type='text', name='row-13-age', value='36') td input#row-13-position.form-control(type='text', name='row-13-position', value='Regional Director') td select#row-13-office.form-control(size='1', name='row-13-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Haley Kennedy td input#row-14-age.form-control(type='text', name='row-14-age', value='43') td input#row-14-position.form-control(type='text', name='row-14-position', value='Senior Marketing Designer') td select#row-14-office.form-control(size='1', name='row-14-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Tatyana Fitzpatrick td input#row-15-age.form-control(type='text', name='row-15-age', value='19') td input#row-15-position.form-control(type='text', name='row-15-position', value='Regional Director') td select#row-15-office.form-control(size='1', name='row-15-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Michael Silva td input#row-16-age.form-control(type='text', name='row-16-age', value='66') td input#row-16-position.form-control(type='text', name='row-16-position', value='Marketing Designer') td select#row-16-office.form-control(size='1', name='row-16-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Paul Byrd td input#row-17-age.form-control(type='text', name='row-17-age', value='64') td input#row-17-position.form-control(type='text', name='row-17-position', value='Chief Financial Officer (CFO)') td select#row-17-office.form-control(size='1', name='row-17-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gloria Little td input#row-18-age.form-control(type='text', name='row-18-age', value='59') td input#row-18-position.form-control(type='text', name='row-18-position', value='Systems Administrator') td select#row-18-office.form-control(size='1', name='row-18-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Bradley Greer td input#row-19-age.form-control(type='text', name='row-19-age', value='41') td input#row-19-position.form-control(type='text', name='row-19-position', value='Software Engineer') td select#row-19-office.form-control(size='1', name='row-19-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Dai Rios td input#row-20-age.form-control(type='text', name='row-20-age', value='35') td input#row-20-position.form-control(type='text', name='row-20-position', value='Personnel Lead') td select#row-20-office.form-control(size='1', name='row-20-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jenette Caldwell td input#row-21-age.form-control(type='text', name='row-21-age', value='30') td input#row-21-position.form-control(type='text', name='row-21-position', value='Development Lead') td select#row-21-office.form-control(size='1', name='row-21-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Yuri Berry td input#row-22-age.form-control(type='text', name='row-22-age', value='40') td input#row-22-position.form-control(type='text', name='row-22-position', value='Chief Marketing Officer (CMO)') td select#row-22-office.form-control(size='1', name='row-22-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Caesar Vance td input#row-23-age.form-control(type='text', name='row-23-age', value='21') td input#row-23-position.form-control(type='text', name='row-23-position', value='Pre-Sales Support') td select#row-23-office.form-control(size='1', name='row-23-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Doris Wilder td input#row-24-age.form-control(type='text', name='row-24-age', value='23') td input#row-24-position.form-control(type='text', name='row-24-position', value='Sales Assistant') td select#row-24-office.form-control(size='1', name='row-24-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Angelica Ramos td input#row-25-age.form-control(type='text', name='row-25-age', value='47') td input#row-25-position.form-control(type='text', name='row-25-position', value='Chief Executive Officer (CEO)') td select#row-25-office.form-control(size='1', name='row-25-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gavin Joyce td input#row-26-age.form-control(type='text', name='row-26-age', value='42') td input#row-26-position.form-control(type='text', name='row-26-position', value='Developer') td select#row-26-office.form-control(size='1', name='row-26-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jennifer Chang td input#row-27-age.form-control(type='text', name='row-27-age', value='28') td input#row-27-position.form-control(type='text', name='row-27-position', value='Regional Director') td select#row-27-office.form-control(size='1', name='row-27-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Brenden Wagner td input#row-28-age.form-control(type='text', name='row-28-age', value='28') td input#row-28-position.form-control(type='text', name='row-28-position', value='Software Engineer') td select#row-28-office.form-control(size='1', name='row-28-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Fiona Green td input#row-29-age.form-control(type='text', name='row-29-age', value='48') td input#row-29-position.form-control(type='text', name='row-29-position', value='Chief Operating Officer (COO)') td select#row-29-office.form-control(size='1', name='row-29-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Shou Itou td input#row-30-age.form-control(type='text', name='row-30-age', value='20') td input#row-30-position.form-control(type='text', name='row-30-position', value='Regional Marketing') td select#row-30-office.form-control(size='1', name='row-30-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Michelle House td input#row-31-age.form-control(type='text', name='row-31-age', value='37') td input#row-31-position.form-control(type='text', name='row-31-position', value='Integration Specialist') td select#row-31-office.form-control(size='1', name='row-31-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Suki Burks td input#row-32-age.form-control(type='text', name='row-32-age', value='53') td input#row-32-position.form-control(type='text', name='row-32-position', value='Developer') td select#row-32-office.form-control(size='1', name='row-32-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Prescott Bartlett td input#row-33-age.form-control(type='text', name='row-33-age', value='27') td input#row-33-position.form-control(type='text', name='row-33-position', value='Technical Author') td select#row-33-office.form-control(size='1', name='row-33-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Gavin Cortez td input#row-34-age.form-control(type='text', name='row-34-age', value='22') td input#row-34-position.form-control(type='text', name='row-34-position', value='Team Leader') td select#row-34-office.form-control(size='1', name='row-34-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Martena Mccray td input#row-35-age.form-control(type='text', name='row-35-age', value='46') td input#row-35-position.form-control(type='text', name='row-35-position', value='Post-Sales support') td select#row-35-office.form-control(size='1', name='row-35-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Unity Butler td input#row-36-age.form-control(type='text', name='row-36-age', value='47') td input#row-36-position.form-control(type='text', name='row-36-position', value='Marketing Designer') td select#row-36-office.form-control(size='1', name='row-36-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Howard Hatfield td input#row-37-age.form-control(type='text', name='row-37-age', value='51') td input#row-37-position.form-control(type='text', name='row-37-position', value='Office Manager') td select#row-37-office.form-control(size='1', name='row-37-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Hope Fuentes td input#row-38-age.form-control(type='text', name='row-38-age', value='41') td input#row-38-position.form-control(type='text', name='row-38-position', value='Secretary') td select#row-38-office.form-control(size='1', name='row-38-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Vivian Harrell td input#row-39-age.form-control(type='text', name='row-39-age', value='62') td input#row-39-position.form-control(type='text', name='row-39-position', value='Financial Controller') td select#row-39-office.form-control(size='1', name='row-39-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Timothy Mooney td input#row-40-age.form-control(type='text', name='row-40-age', value='37') td input#row-40-position.form-control(type='text', name='row-40-position', value='Office Manager') td select#row-40-office.form-control(size='1', name='row-40-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jackson Bradshaw td input#row-41-age.form-control(type='text', name='row-41-age', value='65') td input#row-41-position.form-control(type='text', name='row-41-position', value='Director') td select#row-41-office.form-control(size='1', name='row-41-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Olivia Liang td input#row-42-age.form-control(type='text', name='row-42-age', value='64') td input#row-42-position.form-control(type='text', name='row-42-position', value='Support Engineer') td select#row-42-office.form-control(size='1', name='row-42-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Bruno Nash td input#row-43-age.form-control(type='text', name='row-43-age', value='38') td input#row-43-position.form-control(type='text', name='row-43-position', value='Software Engineer') td select#row-43-office.form-control(size='1', name='row-43-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Sakura Yamamoto td input#row-44-age.form-control(type='text', name='row-44-age', value='37') td input#row-44-position.form-control(type='text', name='row-44-position', value='Support Engineer') td select#row-44-office.form-control(size='1', name='row-44-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo', selected='selected') | Tokyo tr td Thor Walton td input#row-45-age.form-control(type='text', name='row-45-age', value='61') td input#row-45-position.form-control(type='text', name='row-45-position', value='Developer') td select#row-45-office.form-control(size='1', name='row-45-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Finn Camacho td input#row-46-age.form-control(type='text', name='row-46-age', value='47') td input#row-46-position.form-control(type='text', name='row-46-position', value='Support Engineer') td select#row-46-office.form-control(size='1', name='row-46-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Serge Baldwin td input#row-47-age.form-control(type='text', name='row-47-age', value='64') td input#row-47-position.form-control(type='text', name='row-47-position', value='Data Coordinator') td select#row-47-office.form-control(size='1', name='row-47-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Zenaida Frank td input#row-48-age.form-control(type='text', name='row-48-age', value='63') td input#row-48-position.form-control(type='text', name='row-48-position', value='Software Engineer') td select#row-48-office.form-control(size='1', name='row-48-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Zorita Serrano td input#row-49-age.form-control(type='text', name='row-49-age', value='56') td input#row-49-position.form-control(type='text', name='row-49-position', value='Software Engineer') td select#row-49-office.form-control(size='1', name='row-49-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Jennifer Acosta td input#row-50-age.form-control(type='text', name='row-50-age', value='43') td input#row-50-position.form-control(type='text', name='row-50-position', value='Junior Javascript Developer') td select#row-50-office.form-control(size='1', name='row-50-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Cara Stevens td input#row-51-age.form-control(type='text', name='row-51-age', value='46') td input#row-51-position.form-control(type='text', name='row-51-position', value='Sales Assistant') td select#row-51-office.form-control(size='1', name='row-51-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Hermione Butler td input#row-52-age.form-control(type='text', name='row-52-age', value='47') td input#row-52-position.form-control(type='text', name='row-52-position', value='Regional Director') td select#row-52-office.form-control(size='1', name='row-52-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Lael Greer td input#row-53-age.form-control(type='text', name='row-53-age', value='21') td input#row-53-position.form-control(type='text', name='row-53-position', value='Systems Administrator') td select#row-53-office.form-control(size='1', name='row-53-office') option(value='Edinburgh') | Edinburgh option(value='London', selected='selected') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Jonas Alexander td input#row-54-age.form-control(type='text', name='row-54-age', value='30') td input#row-54-position.form-control(type='text', name='row-54-position', value='Developer') td select#row-54-office.form-control(size='1', name='row-54-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco', selected='selected') | San Francisco option(value='Tokyo') | Tokyo tr td Shad Decker td input#row-55-age.form-control(type='text', name='row-55-age', value='51') td input#row-55-position.form-control(type='text', name='row-55-position', value='Regional Director') td select#row-55-office.form-control(size='1', name='row-55-office') option(value='Edinburgh', selected='selected') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Michael Bruce td input#row-56-age.form-control(type='text', name='row-56-age', value='29') td input#row-56-position.form-control(type='text', name='row-56-position', value='Javascript Developer') td select#row-56-office.form-control(size='1', name='row-56-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tr td Donna Snider td input#row-57-age.form-control(type='text', name='row-57-age', value='27') td input#row-57-position.form-control(type='text', name='row-57-position', value='Customer Support') td select#row-57-office.form-control(size='1', name='row-57-office') option(value='Edinburgh') | Edinburgh option(value='London') | London option(value='New York', selected='selected') | New York option(value='San Francisco') | San Francisco option(value='Tokyo') | Tokyo tfoot tr th Name th Age th Position th Office // Form Inputs datatable end // show hide table Starts .col-sm-12 .card .card-header h5 Show / Hide Columns Dynamically span | This example shows how you can make use of the code.api(title='DataTables API method') column().visible() | API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although that is not required for the API function to work. .card-body .table-responsive table#show-hide-datatable.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Row Selection And Deletion (Single Row) Ends // search API regular expresion Starts .col-sm-12 .card .card-header h5 Search API (Regular Expressions) span | This example shows how you can make use of the code.api(title='DataTables API method') column().visible() | API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although that is not required for the API function to work. .card-body .table-responsive.mb-5 table.table.table-striped.table-bordered.nowrap thead tr th Target th Search text th Treat as regex th Use smart search tbody.search-api tr#filter_global td Global search td input#g-filter.g-filter.form-control(type='text') td .checkbox input#global_regex(type='checkbox') label(for='global_regex') td .checkbox input#global_smart.g-filter(type='checkbox', checked='checked') label(for='global_smart') tr#filter_col1(data-column='0') td Column - Name td input#col0_filter.column_filter.form-control(type='text') td .checkbox input#col0_regex.g-filter(type='checkbox') label(for='col0_regex') td .checkbox input#col0_smart.g-filter(type='checkbox', checked='checked') label(for='col0_smart') tr#filter_col2(data-column='1') td Column - Position td input#col1_filter.column_filter.form-control(type='text') td .checkbox input#col_1_regex_search.g-filter(type='checkbox') label(for='col_1_regex_search') td .checkbox input#col_1_smart_search.g-filter(type='checkbox', checked='checked') label(for='col_1_smart_search') tr#filter_col3(data-column='2') td Column - Office td input#col2_filter.column_filter.form-control(type='text') td .checkbox input#col_2_regex_search.g-filter(type='checkbox') label(for='col_2_regex_search') td .checkbox input#col_2_smart_search.g-filter(type='checkbox', checked='checked') label(for='col_2_smart_search') tr#filter_col4(data-column='3') td Column - Age td input#col3_filter.column_filter.form-control(type='text') td .checkbox input#col_3_regex_search.g-filter(type='checkbox') label(for='col_3_regex_search') td .checkbox input#col_3_smart_search.g-filter(type='checkbox', checked='checked') label(for='col_3_smart_search') tr#filter_col5(data-column='4') td Column - Start date td input#col4_filter.column_filter.form-control(type='text') td .checkbox input#col_4_regex_search.g-filter(type='checkbox') label(for='col_4_regex_search') td .checkbox input#col_4_smart_search.g-filter(type='checkbox', checked='checked') label(for='col_4_smart_search') tr#filter_col6(data-column='5') td Column - Salary td input#col5_filter.column_filter.form-control(type='text') td .checkbox input#col_5_regex_search.g-filter(type='checkbox') label(for='col_5_regex_search') td .checkbox input#col_5_smart_search.g-filter(type='checkbox', checked='checked') label(for='col_5_smart_search') .table-responsive table#search-api-datatable.display thead tr th Name th Position th Office th Age th Start date th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98,540 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 tfoot tr th Name th Position th Office th Age th Start date th Salary // Container-fluid Ends include ../../components/footer include ../../components/footer-files