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