- var datatable = true; - var page_datatable = true; - var theme_customizer = true; - var tooltip = true; - var sidebar = true; - var scrollbar = 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 | Basic DataTables ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Tables li.breadcrumb-item Data Tables li.breadcrumb-item.active Basic Init .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row // Zero Configuration Starts .col-sm-12 .card .card-header h5 Zero Configuration span | DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: code $().DataTable(); | . span | Searching, ordering and paging goodness will be immediately added to the table, as shown in this example. .card-body .table-responsive table#basic-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 // Zero Configuration Ends // Feature Unable /Disable Order Starts .col-sm-12 .card .card-header h5 Feature Unable /Disable span | Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object span | In the following example only the search feature is left enabled (which it is by default). .card-body .table-responsive table#basic-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 // Feature Unable /Disable Ends // Default ordering (sorting) Starts .col-sm-12 .card .card-header h5 Default ordering (sorting) span | With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the code.option(title='DataTables initialisation option') order:option | initialisation parameter, you can set | the table to display the data in exactly the order that you want. span | The code.option(title='DataTables initialisation option') order:Option | parameter is an array | of arrays where the first value of the inner array is the column to order on, and the second is code.string(title='String') 'asc':String | (ascending | ordering) or code.string(title='String') 'desc':String | (descending ordering) as required. code.option(title='DataTables initialisation option') order:String | is a 2D array to allow multi-column | ordering to be defined. .card-body .table-responsive table#basic-3.display.dataTable 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 // Default ordering (sorting) Ends // Multi-Column Starts .col-sm-12 .card .card-header h5 Multi-column ordering span | DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways: span | User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column). span | On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the code columns.orderData option. span | Using the code columns.orderData option | option to specify a multiple column order by default (for example [ 0, 1 ]). span | Through the code order() API | API method. span | Note that, the ability for the user to shift click to order multiple columns can be disabled through the code orderMulti option | option. span | The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied directly to the first and the salary column to the first name column. .card-body .table-responsive table#basic-4.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 // Multi-Column Ends // Multiple tables Start .col-sm-12 .card .card-header h5 Multiple tables span | Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple tables. span | The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both together, or independently. span | The example below shows two tables initialised with a single line of code, through the use of the table.display selector (i.e. select all elements which have the class of table.display (which is suitable in this example, you might wish to use a different selector). .card-body .table-responsive table.show-case thead tr th Name th Position th Office th Age th Salary tbody tr td Tiger Nixon td System Architect td Edinburgh td 61 td $320,800 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td $433,060 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td $103,600 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td $342,000 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td $217,500 tr td Gavin Joyce td Developer td Edinburgh td 42 td $92,575 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td $324,050 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td $75,650 tr td Shad Decker td Regional Director td Edinburgh td 51 td $183,000 tfoot tr th Name th Position th Office th Age th Salary table.show-case thead tr th Name th Position th Office th Age th Salary tbody tr td Jena Gaines td Office Manager td London td 30 td $90,560 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td $313,500 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td $385,750 tr td Michael Silva td Marketing Designer td London td 66 td $198,500 tr td Bradley Greer td Software Engineer td London td 41 td $132,000 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td $1,200,000 tr td Suki Burks td Developer td London td 53 td $114,500 tr td Prescott Bartlett td Technical Author td London td 27 td $145,000 tr td Timothy Mooney td Office Manager td London td 37 td $136,200 tr td Bruno Nash td Software Engineer td London td 38 td $163,500 tr td Hermione Butler td Regional Director td London td 47 td $356,250 tr td Lael Greer td Systems Administrator td London td 21 td $103,500 tfoot tr th Name th Position th Office th Age th Salary // Multiple tables Ends // Hidden Starts .col-sm-12 .card .card-header h5 Hidden columns span | There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user (consider also using the Responsive extension for this). This is done through the code columns.visible column option | option. span | The column that is hidden is still part of the table and can be made visible through the api column().visible() API method at a future time if you wish to have columns which can be shown and hidden. span | Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag' information for a row entry might used). span | In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is. .card-body .table-responsive table#basic-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 // Hidden Ends // Complex headers (rowspan and colspan) Starts .col-sm-12 .card .card-header h5 Complex headers (rowspan and colspan) span | When using tables to display data, you will often wish to display column information in groups. DataTables fully supports code colspan | and code rowspan | in the table's header, assigning the required order listeners to the TH element suitable for that column. span | Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column | to attach the order listener, if more than one cell for a column if found. The code.option(title='DataTables initialisation option') orderCellsTop:option | option can be used to tell DataTables to use the top cell if you prefer. span | The example shown below has two sets of grouped information, grouped by colspan in the header. .card-body .table-responsive table#basic-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 (rowspan and colspan) Ends // DOM Positioning Starts .col-sm-12 .card .card-header h5 DOM Positioning span | When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your | liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the code.option(title='DataTables initialisation option') dom:option | initialisation parameter which can be set | to indicate where you wish particular features to appear in the DOM. You can also specify code div | wrapping containers (with an id and / or class) to | provide complete layout flexibility. span | Each HTML control element presented by DataTables is denoted by a single character in the code.option(title='DataTables initialisation option') dom:option | option. For example the code l | option is used for the code L | ength changing | input option. .card-body .table-responsive table#basic-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 // DOM positioning Ends // Flexible table width Starts .col-sm-12 .card .card-header h5 Flexible table width span | Often you may want to have your table resize dynamically with the page. Typically this is done by assigning code width:100% | in your CSS, but this | presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the code width | attribute to the HTML table tag or inline width style ( code style="width:100%" | ), it will be used as the width for the table | (overruling any CSS styles). span | This example shows a table with code width="80%" | and the container is also flexible width, so as the window is resized, the table will also resize | dynamically. .card-body .table-responsive table#basic-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 // Flexible table width Ends // State saving Starts .col-sm-12 .card .card-header h5 State saving span | DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user | reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the code.option(title='DataTables initialisation option') stateSave | option. span | The built in state saving method uses the HTML5 code localStorage | and code sessionStorage | APIs for efficient storage of the data. Please | note that this means that the built in state saving option strong will not work with IE6/7 | as these browsers do not support these APIs. Alternative | options of using cookies or saving the state on the server through Ajax can be used through the code.option(title='DataTables initialisation option') stateSaveCallback | and a(href='//datatables.net/reference/option/stateLoadCallback') code.option(title='DataTables initialisation option') stateLoadCallback | options. span | The duration for which the saved state is valid and can be used to restore the table state can be set using the code.option(title='DataTables initialisation option') stateDuration | initialisation | parameter (2 hours by default). This parameter also controls if code localStorage | (0 or greater) or code sessionStorage | (-1) is used to store | the data. span | The example below simply shows state saving enabled in DataTables with the code.option(title='DataTables initialisation option') stateSave | option. .card-body .table-responsive table#basic-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 // State saving Ends // Alternative pagination Starts .col-sm-12 .card .card-header h5 Alternative pagination span | The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option. .card-body .table-responsive table#basic-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 // Alternative pagination Ends // Scroll - vertical Starts .col-sm-12 .card .card-header h5 Scroll - vertical span | This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!). .card-body .table-responsive table#basic-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 tfoot tr th Name th Position th Office th Age th Start date th Salary // Scroll - vertical Ends // Scroll - vertical dynamic Starts .col-sm-12 .card .card-header h5 Scroll - vertical, dynamic height span | This example shows a vertically scrolling DataTable that makes use of the CSS3 vh unit in order to dynamically resize the viewport based on the browser window height. The vh unit is effectively a percentage of the browser window height. So the 50vh used in this example is 50% of the window height. The viewport size will update dynamically as the window is resized. span | A relatively modern browser is required for vh units to operate correctly. IE9+ supports the vh unit and all other evergreen browsers. .card-body .table-responsive table#basic-12.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 // Scroll - vertical dynamic Ends // Scroll - horizontal Starts .col-sm-12 .card .card-header h5 Scroll - horizontal and vertical span | In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this. .card-body div table#basic-13.display.nowrap(style='width: 100%') 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 // Scroll - horizontal Ends // Language Starts .col-sm-12 .card .card-header h5 Language - Comma decimal place span | A dot (.) is used to mark the decimal place in Javascript, however, many parts of the world use a comma (,) and other characters such as the Unicode decimal separator (⎖) or a dash (-) are often used to show the decimal place in a displayed number. .card-body .table-responsive table#basic-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,00 tr td Garrett Winters td Accountant td Tokyo td 63 td 2011/07/25 td $170.750,00 tr td Ashton Cox td Junior Technical Author td San Francisco td 66 td 2009/01/12 td $86.000,00 tr td Cedric Kelly td Senior Javascript Developer td Edinburgh td 22 td 2012/03/29 td $433.060,00 tr td Airi Satou td Accountant td Tokyo td 33 td 2008/11/28 td $162.700,00 tr td Brielle Williamson td Integration Specialist td New York td 61 td 2012/12/02 td $372.000,00 tr td Herrod Chandler td Sales Assistant td San Francisco td 59 td 2012/08/06 td $137.500,00 tr td Rhona Davidson td Integration Specialist td Tokyo td 55 td 2010/10/14 td $327.900,00 tr td Colleen Hurst td Javascript Developer td San Francisco td 39 td 2009/09/15 td $205.500,00 tr td Sonya Frost td Software Engineer td Edinburgh td 23 td 2008/12/13 td $103.600,00 tr td Jena Gaines td Office Manager td London td 30 td 2008/12/19 td $90.560,00 tr td Quinn Flynn td Support Lead td Edinburgh td 22 td 2013/03/03 td $342.000,00 tr td Charde Marshall td Regional Director td San Francisco td 36 td 2008/10/16 td $470.600,00 tr td Haley Kennedy td Senior Marketing Designer td London td 43 td 2012/12/18 td $313.500,00 tr td Tatyana Fitzpatrick td Regional Director td London td 19 td 2010/03/17 td $385.750,00 tr td Michael Silva td Marketing Designer td London td 66 td 2012/11/27 td $198.500,00 tr td Paul Byrd td Chief Financial Officer (CFO) td New York td 64 td 2010/06/09 td $725.000,00 tr td Gloria Little td Systems Administrator td New York td 59 td 2009/04/10 td $237.500,00 tr td Bradley Greer td Software Engineer td London td 41 td 2012/10/13 td $132.000,00 tr td Dai Rios td Personnel Lead td Edinburgh td 35 td 2012/09/26 td $217.500,00 tr td Jenette Caldwell td Development Lead td New York td 30 td 2011/09/03 td $345.000,00 tr td Yuri Berry td Chief Marketing Officer (CMO) td New York td 40 td 2009/06/25 td $675.000,00 tr td Caesar Vance td Pre-Sales Support td New York td 21 td 2011/12/12 td $106.450,00 tr td Doris Wilder td Sales Assistant td Sidney td 23 td 2010/09/20 td $85.600,00 tr td Angelica Ramos td Chief Executive Officer (CEO) td London td 47 td 2009/10/09 td $1.200.000,00 tr td Gavin Joyce td Developer td Edinburgh td 42 td 2010/12/22 td $92.575,00 tr td Jennifer Chang td Regional Director td Singapore td 28 td 2010/11/14 td $357.650,00 tr td Brenden Wagner td Software Engineer td San Francisco td 28 td 2011/06/07 td $206.850,00 tr td Fiona Green td Chief Operating Officer (COO) td San Francisco td 48 td 2010/03/11 td $850.000,00 tr td Shou Itou td Regional Marketing td Tokyo td 20 td 2011/08/14 td $163.000,00 tr td Michelle House td Integration Specialist td Sidney td 37 td 2011/06/02 td $95.400,00 tr td Suki Burks td Developer td London td 53 td 2009/10/22 td $114.500,00 tr td Prescott Bartlett td Technical Author td London td 27 td 2011/05/07 td $145.000,00 tr td Gavin Cortez td Team Leader td San Francisco td 22 td 2008/10/26 td $235.500,00 tr td Martena Mccray td Post-Sales support td Edinburgh td 46 td 2011/03/09 td $324.050,00 tr td Unity Butler td Marketing Designer td San Francisco td 47 td 2009/12/09 td $85.675,00 tr td Howard Hatfield td Office Manager td San Francisco td 51 td 2008/12/16 td $164.500,00 tr td Hope Fuentes td Secretary td San Francisco td 41 td 2010/02/12 td $109.850,00 tr td Vivian Harrell td Financial Controller td San Francisco td 62 td 2009/02/14 td $452.500,00 tr td Timothy Mooney td Office Manager td London td 37 td 2008/12/11 td $136.200,00 tr td Jackson Bradshaw td Director td New York td 65 td 2008/09/26 td $645.750,00 tr td Olivia Liang td Support Engineer td Singapore td 64 td 2011/02/03 td $234.500,00 tr td Bruno Nash td Software Engineer td London td 38 td 2011/05/03 td $163.500,00 tr td Sakura Yamamoto td Support Engineer td Tokyo td 37 td 2009/08/19 td $139.575,00 tr td Thor Walton td Developer td New York td 61 td 2013/08/11 td $98.540,00 tr td Finn Camacho td Support Engineer td San Francisco td 47 td 2009/07/07 td $87.500,00 tr td Serge Baldwin td Data Coordinator td Singapore td 64 td 2012/04/09 td $138.575,00 tr td Zenaida Frank td Software Engineer td New York td 63 td 2010/01/04 td $125.250,00 tr td Zorita Serrano td Software Engineer td San Francisco td 56 td 2012/06/01 td $115.000,00 tr td Jennifer Acosta td Junior Javascript Developer td Edinburgh td 43 td 2013/02/01 td $75.650,00 tr td Cara Stevens td Sales Assistant td New York td 46 td 2011/12/06 td $145.600,00 tr td Hermione Butler td Regional Director td London td 47 td 2011/03/21 td $356.250,00 tr td Lael Greer td Systems Administrator td London td 21 td 2009/02/27 td $103.500,00 tr td Jonas Alexander td Developer td San Francisco td 30 td 2010/07/14 td $86.500,00 tr td Shad Decker td Regional Director td Edinburgh td 51 td 2008/11/13 td $183.000,00 tr td Michael Bruce td Javascript Developer td Singapore td 29 td 2011/06/27 td $183.000,00 tr td Donna Snider td Customer Support td New York td 27 td 2011/01/25 td $112.000,00 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