3828 lines
210 KiB
Plaintext
3828 lines
210 KiB
Plaintext
- 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
|