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