- var datatable = true; - var datatable_extension = 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 | Responsive Datatables ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Extension Data Tables li.breadcrumb-item.active Responsive .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header h5 Configuration Option span | The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables initialisation options. This method shows the latter, with the responsive option being set to the boolean value true. .card-body .dt-ext.table-responsive table#responsive.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 .col-sm-12 .card .card-header h5 `New` Constructor span | Responsive will automatically detect new DataTable instances being created on a page and initialize itself if it finds the responsive option or responsive class name on the table, as shown in the other examples. .card-body .dt-ext.table-responsive table#new-cons.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 .col-sm-12 .card .card-header h5 Immediately Show Hidden Details span | Responsive has the ability to display the details that it has hidden in a variety of different ways. Its default is to allow the end user to toggle the the display by clicking on a row and showing the information in a DataTables child row. At times it can be useful not to require end user interaction to display the hidden data in a responsive manner, which can be done with the childRowImmediate display type. .card-body .dt-ext.table-responsive table#show-hidden-row.display thead tr th First name th Last name th Position th Office th Age th Start date th Salary th Extn. th E-mail tbody tr td Tiger td Nixon td System Architect td Edinburgh td 61 td 2011/04/25 td $320,800 td 5421 td t.nixon@datatables.net tr td Garrett td Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170,750 td 8422 td g.winters@datatables.net tr td Ashton td Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86,000 td 1562 td a.cox@datatables.net tr td Cedric td Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433,060 td 6224 td c.kelly@datatables.net tr td Airi td Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162,700 td 5407 td a.satou@datatables.net tr td Brielle td Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372,000 td 4804 td b.williamson@datatables.net tr td Herrod td Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137,500 td 9608 td h.chandler@datatables.net tr td Rhona td Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327,900 td 6200 td r.davidson@datatables.net tr td Colleen td Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205,500 td 2360 td c.hurst@datatables.net tr td Sonya td Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103,600 td 1667 td s.frost@datatables.net tr td Jena td Gaines td Office Manager td London td 30 td 2008/12/19 td $90,560 td 3814 td j.gaines@datatables.net tr td Quinn td Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342,000 td 9497 td q.flynn@datatables.net tr td Charde td Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470,600 td 6741 td c.marshall@datatables.net tr td Haley td Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313,500 td 3597 td h.kennedy@datatables.net tr td Tatyana td Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385,750 td 1965 td t.fitzpatrick@datatables.net tr td Michael td Silva td Marketing Designer td London td 66 td 2012/11/27 td $198,500 td 1581 td m.silva@datatables.net tr td Paul td Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725,000 td 3059 td p.byrd@datatables.net tr td Gloria td Little td Systems Administrator td New York td 59 td 2009/04/10 td $237,500 td 1721 td g.little@datatables.net tr td Bradley td Greer td Software Engineer td London td 41 td 2012/10/13 td $132,000 td 2558 td b.greer@datatables.net tr td Dai td Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217,500 td 2290 td d.rios@datatables.net tr td Jenette td Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345,000 td 1937 td j.caldwell@datatables.net tr td Yuri td Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675,000 td 6154 td y.berry@datatables.net tr td Caesar td Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106,450 td 8330 td c.vance@datatables.net tr td Doris td Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85,600 td 3023 td d.wilder@datatables.net tr td Angelica td Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1,200,000 td 5797 td a.ramos@datatables.net tr td Gavin td Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92,575 td 8822 td g.joyce@datatables.net tr td Jennifer td Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357,650 td 9239 td j.chang@datatables.net tr td Brenden td Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206,850 td 1314 td b.wagner@datatables.net tr td Fiona td Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850,000 td 2947 td f.green@datatables.net tr td Shou td Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163,000 td 8899 td s.itou@datatables.net tr td Michelle td House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95,400 td 2769 td m.house@datatables.net tr td Suki td Burks td Developer td London td 53 td 2009/10/22 td $114,500 td 6832 td s.burks@datatables.net tr td Prescott td Bartlett td Technical Author td London td 27 td 2011/05/07 td $145,000 td 3606 td p.bartlett@datatables.net tr td Gavin td Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235,500 td 2860 td g.cortez@datatables.net tr td Martena td Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324,050 td 8240 td m.mccray@datatables.net tr td Unity td Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85,675 td 5384 td u.butler@datatables.net tr td Howard td Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164,500 td 7031 td h.hatfield@datatables.net tr td Hope td Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109,850 td 6318 td h.fuentes@datatables.net tr td Vivian td Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452,500 td 9422 td v.harrell@datatables.net tr td Timothy td Mooney td Office Manager td London td 37 td 2008/12/11 td $136,200 td 7580 td t.mooney@datatables.net tr td Jackson td Bradshaw td Director td New York td 65 td 2008/09/26 td $645,750 td 1042 td j.bradshaw@datatables.net tr td Olivia td Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234,500 td 2120 td o.liang@datatables.net tr td Bruno td Nash td Software Engineer td London td 38 td 2011/05/03 td $163,500 td 6222 td b.nash@datatables.net tr td Sakura td Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139,575 td 9383 td s.yamamoto@datatables.net tr td Thor td Walton td Developer td New York td 61 td 2013/08/11 td $98,540 td 8327 td t.walton@datatables.net tr td Finn td Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87,500 td 2927 td f.camacho@datatables.net tr td Serge td Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138,575 td 8352 td s.baldwin@datatables.net tr td Zenaida td Frank td Software Engineer td New York td 63 td 2010/01/04 td $125,250 td 7439 td z.frank@datatables.net tr td Zorita td Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115,000 td 4389 td z.serrano@datatables.net tr td Jennifer td Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75,650 td 3431 td j.acosta@datatables.net tr td Cara td Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145,600 td 3990 td c.stevens@datatables.net tr td Hermione td Butler td Regional Director td London td 47 td 2011/03/21 td $356,250 td 1016 td h.butler@datatables.net tr td Lael td Greer td Systems Administrator td London td 21 td 2009/02/27 td $103,500 td 6733 td l.greer@datatables.net tr td Jonas td Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86,500 td 8196 td j.alexander@datatables.net tr td Shad td Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183,000 td 6373 td s.decker@datatables.net tr td Michael td Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183,000 td 5384 td m.bruce@datatables.net tr td Donna td Snider td Customer Support td New York td 27 td 2011/01/25 td $112,000 td 4226 td d.snider@datatables.net // Container-fluid Ends include ../../components/footer include ../../components/footer-files