- 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 | Advanced DataTables ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Data Tables li.breadcrumb-item.active Advance init .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 h5 DOM / jQuery span | Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with events. span | One of the best ways of dealing with this is through the use of delegated events with jQuery's code on | method, as shown in this example. This | example also uses the DataTables code.api(title='DataTables API method') row().data()API | method to retrieve information about the selected row - the row's data so we can show it in the code alert | message in this case. .card-body .table-responsive table#advance-1.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 // DOM / jQuery Ends // DataTables events Starts .col-sm-12 .card .card-header h5 DataTables events span | DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace code dt em must | be used), allowing your code to perform custom actions when these events occur. span | All custom events fired by DataTables are fired with the namespace code dt | in order to prevent conflicts arising with other jQuery plug-ins which | also fire events. The DataTables code.api(title='DataTables API method') on().API | method can be | used like the jQuery code on() | method, but will automatically append the code dt | namespace if required. span | This example shows the use of the code.event(title='DataTables event') order:event | , code.event(title='DataTables event') search:event | and code.event(title='DataTables event') page:event | events by adding a notification that the event fired to an | element on the page to show that they have indeed fired. .card-body .table-responsive #demo_info.box.digits table#advance-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 // DataTables events Ends // Column rendering Starts .col-sm-12 .card .card-header h5 Column rendering span | Each column has an optional rendering control called code.option(title='DataTables initialisation option') columns.render:option | which can be used to process the content of each cell before the data is used. code.option(title='DataTables initialisation option') columns.render:option | has a wide array of | options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the | content of a cell, as shown here. span | This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links, | assigning colours based on content rules and any other form of text manipulation you require. .card-body .table-responsive table#advance-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 // Column rendering Ends // Page length options Starts .col-sm-12 .card .card-header h5 Page length options span | It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the code.option(title='DataTables initialisation option') lengthMenu | initialisation option. span This parameter can take one of two forms: ul.list-circle.ms-4.mt-2 li | A 1D array of options which will be used for both the displayed option and the value, or li | A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as | 'All'). span | The example below shows a 2D array being used to include a "Show all" records option. .card-body .table-responsive table#advance-4.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 // Page length options Ends // Multiple table control elements Starts .col-sm-12 .card .card-header h5 Multiple table control elements span | As is described by the basic DOM positioning example you can use the code.option(title='DataTables initialisation option') dom | initialisation parameter to move DataTables features around the table to where you want them. span | In addition to this, you can also use code.option(title='DataTables initialisation option') dom:option | to create multiple instances of these table controls. Simply include the feature's identification letter | where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table ( code.string(title='String') t:string | ) should be included only once). span | This is shown in the demo below where the four key built-in features are duplicated above and below the table. .card-body .table-responsive table#advance-5.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 // Multiple table control elements Ends // Complex headers with column visibility Starts .col-sm-12 .card .card-header h5 Complex headers with column visibility span | Complex headers (using code colspan | / code rowspan | ) can be used to group columns of similar information in DataTables, creating a very | powerful visual effect. span | In addition to the basic behaviour, DataTables can also take code colspan | and code rowspan | into account when working with hidden columns. | The code colspan | and code rowspan | attributes for each cell are automatically calculated and rendered on the page for you. This allows the code.option(title='DataTables initialisation option') columns.visible:option | option and code.api(title='DataTables API method') column().visible():API | method to take into | account code rowspan | / code colspan | cells, drawing the header correctly. span | Note that each column must have at least one unique cell (i.e. a cell without code colspan | ) so DataTables can use that cell to detect the column and | use it to apply ordering. span | The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden. .card-body .table-responsive table#advance-6.display thead tr th(rowspan='2') Name th(colspan='2') HR Information th(colspan='3') Contact tr th Position th Salary th Office th Extn. th E-mail tbody tr td Tiger Nixon td System Architect td $320,800 td Edinburgh td 5421 td t.nixon@datatables.net tr td Garrett Winters td Accountant td $170,750 td Tokyo td 8422 td g.winters@datatables.net tr td Ashton Cox td Junior Technical Author td $86,000 td San Francisco td 1562 td a.cox@datatables.net tr td Cedric Kelly td Senior Javascript Developer td $433,060 td Edinburgh td 6224 td c.kelly@datatables.net tr td Airi Satou td Accountant td $162,700 td Tokyo td 5407 td a.satou@datatables.net tr td Brielle Williamson td Integration Specialist td $372,000 td New York td 4804 td b.williamson@datatables.net tr td Herrod Chandler td Sales Assistant td $137,500 td San Francisco td 9608 td h.chandler@datatables.net tr td Rhona Davidson td Integration Specialist td $327,900 td Tokyo td 6200 td r.davidson@datatables.net tr td Colleen Hurst td Javascript Developer td $205,500 td San Francisco td 2360 td c.hurst@datatables.net tr td Sonya Frost td Software Engineer td $103,600 td Edinburgh td 1667 td s.frost@datatables.net tr td Jena Gaines td Office Manager td $90,560 td London td 3814 td j.gaines@datatables.net tr td Quinn Flynn td Support Lead td $342,000 td Edinburgh td 9497 td q.flynn@datatables.net tr td Charde Marshall td Regional Director td $470,600 td San Francisco td 6741 td c.marshall@datatables.net tr td Haley Kennedy td Senior Marketing Designer td $313,500 td London td 3597 td h.kennedy@datatables.net tr td Tatyana Fitzpatrick td Regional Director td $385,750 td London td 1965 td t.fitzpatrick@datatables.net tr td Michael Silva td Marketing Designer td $198,500 td London td 1581 td m.silva@datatables.net tr td Paul Byrd td Chief Financial Officer (CFO) td $725,000 td New York td 3059 td p.byrd@datatables.net tr td Gloria Little td Systems Administrator td $237,500 td New York td 1721 td g.little@datatables.net tr td Bradley Greer td Software Engineer td $132,000 td London td 2558 td b.greer@datatables.net tr td Dai Rios td Personnel Lead td $217,500 td Edinburgh td 2290 td d.rios@datatables.net tr td Jenette Caldwell td Development Lead td $345,000 td New York td 1937 td j.caldwell@datatables.net tr td Yuri Berry td Chief Marketing Officer (CMO) td $675,000 td New York td 6154 td y.berry@datatables.net tr td Caesar Vance td Pre-Sales Support td $106,450 td New York td 8330 td c.vance@datatables.net tr td Doris Wilder td Sales Assistant td $85,600 td Sidney td 3023 td d.wilder@datatables.net tr td Angelica Ramos td Chief Executive Officer (CEO) td $1,200,000 td London td 5797 td a.ramos@datatables.net tr td Gavin Joyce td Developer td $92,575 td Edinburgh td 8822 td g.joyce@datatables.net tr td Jennifer Chang td Regional Director td $357,650 td Singapore td 9239 td j.chang@datatables.net tr td Brenden Wagner td Software Engineer td $206,850 td San Francisco td 1314 td b.wagner@datatables.net tr td Fiona Green td Chief Operating Officer (COO) td $850,000 td San Francisco td 2947 td f.green@datatables.net tr td Shou Itou td Regional Marketing td $163,000 td Tokyo td 8899 td s.itou@datatables.net tr td Michelle House td Integration Specialist td $95,400 td Sidney td 2769 td m.house@datatables.net tr td Suki Burks td Developer td $114,500 td London td 6832 td s.burks@datatables.net tr td Prescott Bartlett td Technical Author td $145,000 td London td 3606 td p.bartlett@datatables.net tr td Gavin Cortez td Team Leader td $235,500 td San Francisco td 2860 td g.cortez@datatables.net tr td Martena Mccray td Post-Sales support td $324,050 td Edinburgh td 8240 td m.mccray@datatables.net tr td Unity Butler td Marketing Designer td $85,675 td San Francisco td 5384 td u.butler@datatables.net tr td Howard Hatfield td Office Manager td $164,500 td San Francisco td 7031 td h.hatfield@datatables.net tr td Hope Fuentes td Secretary td $109,850 td San Francisco td 6318 td h.fuentes@datatables.net tr td Vivian Harrell td Financial Controller td $452,500 td San Francisco td 9422 td v.harrell@datatables.net tr td Timothy Mooney td Office Manager td $136,200 td London td 7580 td t.mooney@datatables.net tr td Jackson Bradshaw td Director td $645,750 td New York td 1042 td j.bradshaw@datatables.net tr td Olivia Liang td Support Engineer td $234,500 td Singapore td 2120 td o.liang@datatables.net tr td Bruno Nash td Software Engineer td $163,500 td London td 6222 td b.nash@datatables.net tr td Sakura Yamamoto td Support Engineer td $139,575 td Tokyo td 9383 td s.yamamoto@datatables.net tr td Thor Walton td Developer td $98,540 td New York td 8327 td t.walton@datatables.net tr td Finn Camacho td Support Engineer td $87,500 td San Francisco td 2927 td f.camacho@datatables.net tr td Serge Baldwin td Data Coordinator td $138,575 td Singapore td 8352 td s.baldwin@datatables.net tr td Zenaida Frank td Software Engineer td $125,250 td New York td 7439 td z.frank@datatables.net tr td Zorita Serrano td Software Engineer td $115,000 td San Francisco td 4389 td z.serrano@datatables.net tr td Jennifer Acosta td Junior Javascript Developer td $75,650 td Edinburgh td 3431 td j.acosta@datatables.net tr td Cara Stevens td Sales Assistant td $145,600 td New York td 3990 td c.stevens@datatables.net tr td Hermione Butler td Regional Director td $356,250 td London td 1016 td h.butler@datatables.net tr td Lael Greer td Systems Administrator td $103,500 td London td 6733 td l.greer@datatables.net tr td Jonas Alexander td Developer td $86,500 td San Francisco td 8196 td j.alexander@datatables.net tr td Shad Decker td Regional Director td $183,000 td Edinburgh td 6373 td s.decker@datatables.net tr td Michael Bruce td Javascript Developer td $183,000 td Singapore td 5384 td m.bruce@datatables.net tr td Donna Snider td Customer Support td $112,000 td New York td 4226 td d.snider@datatables.net tfoot tr th Name th Position th Salary th Office th Extn. th E-mail // Complex headers with column visibility Ends // Read HTML to data objects Starts .col-sm-12 .card .card-header h5 Read HTML to data objects span | When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the | table into an array that DataTables stores internally. Each array element represents a column. span | It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the code.option(title='DataTables initialisation option') columns.data:option | initialisation option to | define how you want the data to be stored. Typically code.option(title='DataTables initialisation option') columns.data:option | is used with Ajax sourced data to tell DataTables where to read | data from, but as can be seen here it also tells DataTables where to write the data to. span | This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised. .card-body .table-responsive table#advance-7.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 // Read HTML to data objects visibility Ends // Language file Starts .col-sm-12 .card .card-header h5 Language file span | As well as being able to pass language information to DataTables through the code.option(title='DataTables initialisation option') language:option | initialisation option, you can also store the language information in a file, which DataTables can | load by Ajax using the code.option(title='DataTables initialisation option') language.url:option | option. .card-body .table-responsive table#advance-8.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 // Language file Ends // Setting defaults Starts .col-sm-12 .card .card-header h5 Setting defaults span | When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set code.option(title='DataTables initialisation option') dom:option | to a common value so all tables | get the same layout). This can be done using the code $.fn.dataTable.defaults | object. This object will take all of the same parameters as the | DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables. span | This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised. .card-body .table-responsive table#advance-9.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 // Setting defaults Ends // Row created callback Starts .col-sm-12 .card .card-header h5 Row created callback span | The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the code.option(title='DataTables initialisation option') createdRow:option | function is called | once and once only. It is passed the create row node which can then be modified. span | In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than | $150,000. Note that code.option(title='DataTables initialisation option') columns.createdCell | could also be used to create exactly the same effect. .card-body .table-responsive table#advance-10.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 created callback Ends // Row grouping Starts .col-sm-12 .card .card-header h5 Row grouping span | Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping. span | In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the code drawCallback:option | function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column. .card-body .table-responsive table#advance-11.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 // Row grouping Ends // Footer callback Starts .col-sm-12 .card .card-header h5 Footer callback span | Through the use of the header and footer callback manipulation functions provided by DataTables ( code.option(title='DataTables initialisation option') headerCallback:option | and code.option(title='DataTables initialisation option') footerCallback:option | ), it is possible to | perform some powerful and useful data manipulation functions, such as summarising data in the table. span | The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the code.api(title='DataTables API method') column().data():API | API method and code.api(title='DataTables API method') column().footer():API | for writing the value into the | footer. .card-body.table-responsive table#advance-12.display thead tr th First name th Last name th Position th Office th Salary tbody tr td Tiger td Nixon td System Architect td Edinburgh td $320,800 tr td Garrett td Winters td Accountant td Tokyo td $170,750 tr td Ashton td Cox td Junior Technical Author td San Francisco td $86,000 tr td Cedric td Kelly td Senior Javascript Developer td Edinburgh td $433,060 tr td Airi td Satou td Accountant td Tokyo td $162,700 tr td Brielle td Williamson td Integration Specialist td New York td $372,000 tr td Herrod td Chandler td Sales Assistant td San Francisco td $137,500 tr td Rhona td Davidson td Integration Specialist td Tokyo td $327,900 tr td Colleen td Hurst td Javascript Developer td San Francisco td $205,500 tr td Sonya td Frost td Software Engineer td Edinburgh td $103,600 tr td Jena td Gaines td Office Manager td London td $90,560 tr td Quinn td Flynn td Support Lead td Edinburgh td $342,000 tr td Charde td Marshall td Regional Director td San Francisco td $470,600 tr td Haley td Kennedy td Senior Marketing Designer td London td $313,500 tr td Tatyana td Fitzpatrick td Regional Director td London td $385,750 tr td Michael td Silva td Marketing Designer td London td $198,500 tr td Paul td Byrd td Chief Financial Officer (CFO) td New York td $725,000 tr td Gloria td Little td Systems Administrator td New York td $237,500 tr td Bradley td Greer td Software Engineer td London td $132,000 tr td Dai td Rios td Personnel Lead td Edinburgh td $217,500 tr td Jenette td Caldwell td Development Lead td New York td $345,000 tr td Yuri td Berry td Chief Marketing Officer (CMO) td New York td $675,000 tr td Caesar td Vance td Pre-Sales Support td New York td $106,450 tr td Doris td Wilder td Sales Assistant td Sidney td $85,600 tr td Angelica td Ramos td Chief Executive Officer (CEO) td London td $1,200,000 tr td Gavin td Joyce td Developer td Edinburgh td $92,575 tr td Jennifer td Chang td Regional Director td Singapore td $357,650 tr td Brenden td Wagner td Software Engineer td San Francisco td $206,850 tr td Fiona td Green td Chief Operating Officer (COO) td San Francisco td $850,000 tr td Shou td Itou td Regional Marketing td Tokyo td $163,000 tr td Michelle td House td Integration Specialist td Sidney td $95,400 tr td Suki td Burks td Developer td London td $114,500 tr td Prescott td Bartlett td Technical Author td London td $145,000 tr td Gavin td Cortez td Team Leader td San Francisco td $235,500 tr td Martena td Mccray td Post-Sales support td Edinburgh td $324,050 tr td Unity td Butler td Marketing Designer td San Francisco td $85,675 tr td Howard td Hatfield td Office Manager td San Francisco td $164,500 tr td Hope td Fuentes td Secretary td San Francisco td $109,850 tr td Vivian td Harrell td Financial Controller td San Francisco td $452,500 tr td Timothy td Mooney td Office Manager td London td $136,200 tr td Jackson td Bradshaw td Director td New York td $645,750 tr td Olivia td Liang td Support Engineer td Singapore td $234,500 tr td Bruno td Nash td Software Engineer td London td $163,500 tr td Sakura td Yamamoto td Support Engineer td Tokyo td $139,575 tr td Thor td Walton td Developer td New York td $98,540 tr td Finn td Camacho td Support Engineer td San Francisco td $87,500 tr td Serge td Baldwin td Data Coordinator td Singapore td $138,575 tr td Zenaida td Frank td Software Engineer td New York td $125,250 tr td Zorita td Serrano td Software Engineer td San Francisco td $115,000 tr td Jennifer td Acosta td Junior Javascript Developer td Edinburgh td $75,650 tr td Cara td Stevens td Sales Assistant td New York td $145,600 tr td Hermione td Butler td Regional Director td London td $356,250 tr td Lael td Greer td Systems Administrator td London td $103,500 tr td Jonas td Alexander td Developer td San Francisco td $86,500 tr td Shad td Decker td Regional Director td Edinburgh td $183,000 tr td Michael td Bruce td Javascript Developer td Singapore td $183,000 tr td Donna td Snider td Customer Support td New York td $112,000 // Footer callback Ends // Custom toolbar elements Starts .col-sm-12 .card .card-header h5 Footer callback span | DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom | elements. In this example a code.tag(title='HTML tag') div | with a class of '-string toolbar' is created using code.option(title='DataTables initialisation option') dom | , and jQuery then used to insert HTML into | that element to create the toolbar. You could put whatever HTML you want into the toolbar! span | For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins | which are used in a table by a single character reference in the code.option(title='DataTables initialisation option') dom | option (like the built in option of code.string(title='String') f | refers to 'filtering input', | you could have an code.string(title='String') F | option which creates your own filtering input control, custom to your app). span | There are a number of extensions for DataTables that make use of this ability. For example, Buttons is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to | Excel / PDF, and more). .card-body.table-responsive table#advance-13.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 // Custom toolbar elements Ends // Order direction sequence control Starts .col-sm-12 .card .card-header h5 Order direction sequence control span | At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default | ascending. This can be done through the use of the code.option(title='DataTables initialisation option') columns.orderSequence:option | initialisation parameter. This parameter also allows you to limit the ordering to a single | direction, or you could add complex behaviour to the ordering interaction. .card-body.table-responsive table#advance-14.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