- 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
| Plugin DataTable
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Tables
li.breadcrumb-item Data Tables
li.breadcrumb-item.active Plug in
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
// DOM / jQuery Starts
.col-sm-12
.card
.card-header
h5 API plug-in methods
span
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
.card-body
.dt-plugin-buttons
.table-responsive
table#dt-plugin-method.display.datatables
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// DOM / jQuery Ends
// Column rendering Starts
.col-sm-12
.card
.card-header
h5 Ordering plug-ins (with type detection)
span This example shows ordering with using an enumerated type.
.card-body
.table-responsive
table#datatable-ordering.table.table-striped.table-bordered.nowrap
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 Low
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td Low
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td Low
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td Medium
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td Low
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td Medium
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td Low
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td Low
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td Low
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td Low
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td Low
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td Low
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td Medium
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td Low
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td Medium
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td Low
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td High
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td Low
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td Low
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td Low
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td Low
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td High
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td Low
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td Low
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td High
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td Low
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td Medium
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td Low
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td High
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td Low
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td Low
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td Low
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td Low
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td Low
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td Low
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td Low
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td Low
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td Low
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td Medium
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td Low
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td Medium
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td Low
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td Low
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td Low
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td Low
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td Low
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td Low
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td Low
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td Low
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td Low
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td Low
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td Medium
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td Low
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td Low
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td Low
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td Low
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td Low
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Column rendering Ends
// Multiple table control elements Starts
.col-sm-12
.card
.card-header
h5 Custom filtering - range search
span
| This example shows a search being performed on the age column in the data, based upon two inputs.
.card-body
.table-responsive.dataTables_wrapper.me-0
table
tbody.dataTables_filter
tr
td Minimum age:
td
input#min.form-control(type='search', name='min')
tr
td Maximum age:
td
input#max.form-control(type='search', name='max')
.table-responsive
table#datatable-range.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Multiple table control elements Ends
// Complex headers with column visibility Starts
.col-sm-12
.card
.card-header
h5 Live DOM ordering
span
| This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.
.card-body
.table-responsive
table#datatable-livedom.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
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files