- 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
| Advanced DataTables
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Tables
li.breadcrumb-item Data Tables
li.breadcrumb-item.active Advance init
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
.col-sm-12
.card
.card-header.pb-0
h5 DOM / jQuery
span
| Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with events.
span
| One of the best ways of dealing with this is through the use of delegated events with jQuery's
code on
| method, as shown in this example. This
| example also uses the DataTables
code.api(title='DataTables API method') row().data()API
| method to retrieve information about the selected row - the row's data so we can show it in the
code alert
| message in this case.
.card-body
.table-responsive
table#advance-1.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// DOM / jQuery Ends
// DataTables events Starts
.col-sm-12
.card
.card-header
h5 DataTables events
span
| DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace
code dt
em must
| be used), allowing your code to perform custom actions when these events occur.
span
| All custom events fired by DataTables are fired with the namespace
code dt
| in order to prevent conflicts arising with other jQuery plug-ins which
| also fire events. The DataTables
code.api(title='DataTables API method') on().API
| method can be
| used like the jQuery
code on()
| method, but will automatically append the
code dt
| namespace if required.
span
| This example shows the use of the
code.event(title='DataTables event') order:event
| ,
code.event(title='DataTables event') search:event
| and
code.event(title='DataTables event') page:event
| events by adding a notification that the event fired to an
| element on the page to show that they have indeed fired.
.card-body
.table-responsive
#demo_info.box.digits
table#advance-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
// DataTables events Ends
// Column rendering Starts
.col-sm-12
.card
.card-header
h5 Column rendering
span
| Each column has an optional rendering control called
code.option(title='DataTables initialisation option') columns.render:option
| which can be used to process the content of each cell before the data is used.
code.option(title='DataTables initialisation option') columns.render:option
| has a wide array of
| options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the
| content of a cell, as shown here.
span
| This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
| assigning colours based on content rules and any other form of text manipulation you require.
.card-body
.table-responsive
table#advance-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
// Column rendering Ends
// Page length options Starts
.col-sm-12
.card
.card-header
h5 Page length options
span
| It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the
code.option(title='DataTables initialisation option') lengthMenu
| initialisation option.
span This parameter can take one of two forms:
ul.list-circle.ms-4.mt-2
li
| A 1D array of options which will be used for both the displayed option and the value, or
li
| A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as
| 'All').
span
| The example below shows a 2D array being used to include a "Show all" records option.
.card-body
.table-responsive
table#advance-4.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
// Page length options Ends
// Multiple table control elements Starts
.col-sm-12
.card
.card-header
h5 Multiple table control elements
span
| As is described by the basic DOM positioning example you can use the
code.option(title='DataTables initialisation option') dom
| initialisation parameter to move DataTables features around the table to where you want them.
span
| In addition to this, you can also use
code.option(title='DataTables initialisation option') dom:option
| to create multiple instances of these table controls. Simply include the feature's identification letter
| where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (
code.string(title='String') t:string
| ) should be included only once).
span
| This is shown in the demo below where the four key built-in features are duplicated above and below the table.
.card-body
.table-responsive
table#advance-5.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Multiple table control elements Ends
// Complex headers with column visibility Starts
.col-sm-12
.card
.card-header
h5 Complex headers with column visibility
span
| Complex headers (using
code colspan
| /
code rowspan
| ) can be used to group columns of similar information in DataTables, creating a very
| powerful visual effect.
span
| In addition to the basic behaviour, DataTables can also take
code colspan
| and
code rowspan
| into account when working with hidden columns.
| The
code colspan
| and
code rowspan
| attributes for each cell are automatically calculated and rendered on the page for you. This allows the
code.option(title='DataTables initialisation option') columns.visible:option
| option and
code.api(title='DataTables API method') column().visible():API
| method to take into
| account
code rowspan
| /
code colspan
| cells, drawing the header correctly.
span
| Note that each column must have at least one unique cell (i.e. a cell without
code colspan
| ) so DataTables can use that cell to detect the column and
| use it to apply ordering.
span
| The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.
.card-body
.table-responsive
table#advance-6.display
thead
tr
th(rowspan='2') Name
th(colspan='2') HR Information
th(colspan='3') Contact
tr
th Position
th Salary
th Office
th Extn.
th E-mail
tbody
tr
td Tiger Nixon
td System Architect
td $320,800
td Edinburgh
td 5421
td [email protected]
tr
td Garrett Winters
td Accountant
td $170,750
td Tokyo
td 8422
td [email protected]
tr
td Ashton Cox
td Junior Technical Author
td $86,000
td San Francisco
td 1562
td [email protected]
tr
td Cedric Kelly
td Senior Javascript Developer
td $433,060
td Edinburgh
td 6224
td [email protected]
tr
td Airi Satou
td Accountant
td $162,700
td Tokyo
td 5407
td [email protected]
tr
td Brielle Williamson
td Integration Specialist
td $372,000
td New York
td 4804
td [email protected]
tr
td Herrod Chandler
td Sales Assistant
td $137,500
td San Francisco
td 9608
td [email protected]
tr
td Rhona Davidson
td Integration Specialist
td $327,900
td Tokyo
td 6200
td [email protected]
tr
td Colleen Hurst
td Javascript Developer
td $205,500
td San Francisco
td 2360
td [email protected]
tr
td Sonya Frost
td Software Engineer
td $103,600
td Edinburgh
td 1667
td [email protected]
tr
td Jena Gaines
td Office Manager
td $90,560
td London
td 3814
td [email protected]
tr
td Quinn Flynn
td Support Lead
td $342,000
td Edinburgh
td 9497
td [email protected]
tr
td Charde Marshall
td Regional Director
td $470,600
td San Francisco
td 6741
td [email protected]
tr
td Haley Kennedy
td Senior Marketing Designer
td $313,500
td London
td 3597
td [email protected]
tr
td Tatyana Fitzpatrick
td Regional Director
td $385,750
td London
td 1965
td [email protected]
tr
td Michael Silva
td Marketing Designer
td $198,500
td London
td 1581
td [email protected]
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td $725,000
td New York
td 3059
td [email protected]
tr
td Gloria Little
td Systems Administrator
td $237,500
td New York
td 1721
td [email protected]
tr
td Bradley Greer
td Software Engineer
td $132,000
td London
td 2558
td [email protected]
tr
td Dai Rios
td Personnel Lead
td $217,500
td Edinburgh
td 2290
td [email protected]
tr
td Jenette Caldwell
td Development Lead
td $345,000
td New York
td 1937
td [email protected]
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td $675,000
td New York
td 6154
td [email protected]
tr
td Caesar Vance
td Pre-Sales Support
td $106,450
td New York
td 8330
td [email protected]
tr
td Doris Wilder
td Sales Assistant
td $85,600
td Sidney
td 3023
td [email protected]
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td $1,200,000
td London
td 5797
td [email protected]
tr
td Gavin Joyce
td Developer
td $92,575
td Edinburgh
td 8822
td [email protected]
tr
td Jennifer Chang
td Regional Director
td $357,650
td Singapore
td 9239
td [email protected]
tr
td Brenden Wagner
td Software Engineer
td $206,850
td San Francisco
td 1314
td [email protected]
tr
td Fiona Green
td Chief Operating Officer (COO)
td $850,000
td San Francisco
td 2947
td [email protected]
tr
td Shou Itou
td Regional Marketing
td $163,000
td Tokyo
td 8899
td [email protected]
tr
td Michelle House
td Integration Specialist
td $95,400
td Sidney
td 2769
td [email protected]
tr
td Suki Burks
td Developer
td $114,500
td London
td 6832
td [email protected]
tr
td Prescott Bartlett
td Technical Author
td $145,000
td London
td 3606
td [email protected]
tr
td Gavin Cortez
td Team Leader
td $235,500
td San Francisco
td 2860
td [email protected]
tr
td Martena Mccray
td Post-Sales support
td $324,050
td Edinburgh
td 8240
td [email protected]
tr
td Unity Butler
td Marketing Designer
td $85,675
td San Francisco
td 5384
td [email protected]
tr
td Howard Hatfield
td Office Manager
td $164,500
td San Francisco
td 7031
td [email protected]
tr
td Hope Fuentes
td Secretary
td $109,850
td San Francisco
td 6318
td [email protected]
tr
td Vivian Harrell
td Financial Controller
td $452,500
td San Francisco
td 9422
td [email protected]
tr
td Timothy Mooney
td Office Manager
td $136,200
td London
td 7580
td [email protected]
tr
td Jackson Bradshaw
td Director
td $645,750
td New York
td 1042
td [email protected]
tr
td Olivia Liang
td Support Engineer
td $234,500
td Singapore
td 2120
td [email protected]
tr
td Bruno Nash
td Software Engineer
td $163,500
td London
td 6222
td [email protected]
tr
td Sakura Yamamoto
td Support Engineer
td $139,575
td Tokyo
td 9383
td [email protected]
tr
td Thor Walton
td Developer
td $98,540
td New York
td 8327
td [email protected]
tr
td Finn Camacho
td Support Engineer
td $87,500
td San Francisco
td 2927
td [email protected]
tr
td Serge Baldwin
td Data Coordinator
td $138,575
td Singapore
td 8352
td [email protected]
tr
td Zenaida Frank
td Software Engineer
td $125,250
td New York
td 7439
td [email protected]
tr
td Zorita Serrano
td Software Engineer
td $115,000
td San Francisco
td 4389
td [email protected]
tr
td Jennifer Acosta
td Junior Javascript Developer
td $75,650
td Edinburgh
td 3431
td [email protected]
tr
td Cara Stevens
td Sales Assistant
td $145,600
td New York
td 3990
td [email protected]
tr
td Hermione Butler
td Regional Director
td $356,250
td London
td 1016
td [email protected]
tr
td Lael Greer
td Systems Administrator
td $103,500
td London
td 6733
td [email protected]
tr
td Jonas Alexander
td Developer
td $86,500
td San Francisco
td 8196
td [email protected]
tr
td Shad Decker
td Regional Director
td $183,000
td Edinburgh
td 6373
td [email protected]
tr
td Michael Bruce
td Javascript Developer
td $183,000
td Singapore
td 5384
td [email protected]
tr
td Donna Snider
td Customer Support
td $112,000
td New York
td 4226
td [email protected]
tfoot
tr
th Name
th Position
th Salary
th Office
th Extn.
th E-mail
// Complex headers with column visibility Ends
// Read HTML to data objects Starts
.col-sm-12
.card
.card-header
h5 Read HTML to data objects
span
| When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the
| table into an array that DataTables stores internally. Each array element represents a column.
span
| It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the
code.option(title='DataTables initialisation option') columns.data:option
| initialisation option to
| define how you want the data to be stored. Typically
code.option(title='DataTables initialisation option') columns.data:option
| is used with Ajax sourced data to tell DataTables where to read
| data from, but as can be seen here it also tells DataTables where to write the data to.
span
| This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.
.card-body
.table-responsive
table#advance-7.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Read HTML to data objects visibility Ends
// Language file Starts
.col-sm-12
.card
.card-header
h5 Language file
span
| As well as being able to pass language information to DataTables through the
code.option(title='DataTables initialisation option') language:option
| initialisation option, you can also store the language information in a file, which DataTables can
| load by Ajax using the
code.option(title='DataTables initialisation option') language.url:option
| option.
.card-body
.table-responsive
table#advance-8.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Language file Ends
// Setting defaults Starts
.col-sm-12
.card
.card-header
h5 Setting defaults
span
| When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set
code.option(title='DataTables initialisation option') dom:option
| to a common value so all tables
| get the same layout). This can be done using the
code $.fn.dataTable.defaults
| object. This object will take all of the same parameters as the
| DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables.
span
| This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.
.card-body
.table-responsive
table#advance-9.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Setting defaults Ends
// Row created callback Starts
.col-sm-12
.card
.card-header
h5 Row created callback
span
| The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the
code.option(title='DataTables initialisation option') createdRow:option
| function is called
| once and once only. It is passed the create row node which can then be modified.
span
| In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than
| $150,000. Note that
code.option(title='DataTables initialisation option') columns.createdCell
| could also be used to create exactly the same effect.
.card-body
.table-responsive
table#advance-10.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
tfoot
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
// Row created callback Ends
// Row grouping Starts
.col-sm-12
.card
.card-header
h5 Row grouping
span
| Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly possible to give the look and feel of row grouping.
span
| In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the
code drawCallback:option
| function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.
.card-body
.table-responsive
table#advance-11.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
tr
td Garrett Winters
td Accountant
td Tokyo
td 63
td 2011/07/25
td $170,750
tr
td Ashton Cox
td Junior Technical Author
td San Francisco
td 66
td 2009/01/12
td $86,000
tr
td Cedric Kelly
td Senior Javascript Developer
td Edinburgh
td 22
td 2012/03/29
td $433,060
tr
td Airi Satou
td Accountant
td Tokyo
td 33
td 2008/11/28
td $162,700
tr
td Brielle Williamson
td Integration Specialist
td New York
td 61
td 2012/12/02
td $372,000
tr
td Herrod Chandler
td Sales Assistant
td San Francisco
td 59
td 2012/08/06
td $137,500
tr
td Rhona Davidson
td Integration Specialist
td Tokyo
td 55
td 2010/10/14
td $327,900
tr
td Colleen Hurst
td Javascript Developer
td San Francisco
td 39
td 2009/09/15
td $205,500
tr
td Sonya Frost
td Software Engineer
td Edinburgh
td 23
td 2008/12/13
td $103,600
tr
td Jena Gaines
td Office Manager
td London
td 30
td 2008/12/19
td $90,560
tr
td Quinn Flynn
td Support Lead
td Edinburgh
td 22
td 2013/03/03
td $342,000
tr
td Charde Marshall
td Regional Director
td San Francisco
td 36
td 2008/10/16
td $470,600
tr
td Haley Kennedy
td Senior Marketing Designer
td London
td 43
td 2012/12/18
td $313,500
tr
td Tatyana Fitzpatrick
td Regional Director
td London
td 19
td 2010/03/17
td $385,750
tr
td Michael Silva
td Marketing Designer
td London
td 66
td 2012/11/27
td $198,500
tr
td Paul Byrd
td Chief Financial Officer (CFO)
td New York
td 64
td 2010/06/09
td $725,000
tr
td Gloria Little
td Systems Administrator
td New York
td 59
td 2009/04/10
td $237,500
tr
td Bradley Greer
td Software Engineer
td London
td 41
td 2012/10/13
td $132,000
tr
td Dai Rios
td Personnel Lead
td Edinburgh
td 35
td 2012/09/26
td $217,500
tr
td Jenette Caldwell
td Development Lead
td New York
td 30
td 2011/09/03
td $345,000
tr
td Yuri Berry
td Chief Marketing Officer (CMO)
td New York
td 40
td 2009/06/25
td $675,000
tr
td Caesar Vance
td Pre-Sales Support
td New York
td 21
td 2011/12/12
td $106,450
tr
td Doris Wilder
td Sales Assistant
td Sidney
td 23
td 2010/09/20
td $85,600
tr
td Angelica Ramos
td Chief Executive Officer (CEO)
td London
td 47
td 2009/10/09
td $1,200,000
tr
td Gavin Joyce
td Developer
td Edinburgh
td 42
td 2010/12/22
td $92,575
tr
td Jennifer Chang
td Regional Director
td Singapore
td 28
td 2010/11/14
td $357,650
tr
td Brenden Wagner
td Software Engineer
td San Francisco
td 28
td 2011/06/07
td $206,850
tr
td Fiona Green
td Chief Operating Officer (COO)
td San Francisco
td 48
td 2010/03/11
td $850,000
tr
td Shou Itou
td Regional Marketing
td Tokyo
td 20
td 2011/08/14
td $163,000
tr
td Michelle House
td Integration Specialist
td Sidney
td 37
td 2011/06/02
td $95,400
tr
td Suki Burks
td Developer
td London
td 53
td 2009/10/22
td $114,500
tr
td Prescott Bartlett
td Technical Author
td London
td 27
td 2011/05/07
td $145,000
tr
td Gavin Cortez
td Team Leader
td San Francisco
td 22
td 2008/10/26
td $235,500
tr
td Martena Mccray
td Post-Sales support
td Edinburgh
td 46
td 2011/03/09
td $324,050
tr
td Unity Butler
td Marketing Designer
td San Francisco
td 47
td 2009/12/09
td $85,675
tr
td Howard Hatfield
td Office Manager
td San Francisco
td 51
td 2008/12/16
td $164,500
tr
td Hope Fuentes
td Secretary
td San Francisco
td 41
td 2010/02/12
td $109,850
tr
td Vivian Harrell
td Financial Controller
td San Francisco
td 62
td 2009/02/14
td $452,500
tr
td Timothy Mooney
td Office Manager
td London
td 37
td 2008/12/11
td $136,200
tr
td Jackson Bradshaw
td Director
td New York
td 65
td 2008/09/26
td $645,750
tr
td Olivia Liang
td Support Engineer
td Singapore
td 64
td 2011/02/03
td $234,500
tr
td Bruno Nash
td Software Engineer
td London
td 38
td 2011/05/03
td $163,500
tr
td Sakura Yamamoto
td Support Engineer
td Tokyo
td 37
td 2009/08/19
td $139,575
tr
td Thor Walton
td Developer
td New York
td 61
td 2013/08/11
td $98,540
tr
td Finn Camacho
td Support Engineer
td San Francisco
td 47
td 2009/07/07
td $87,500
tr
td Serge Baldwin
td Data Coordinator
td Singapore
td 64
td 2012/04/09
td $138,575
tr
td Zenaida Frank
td Software Engineer
td New York
td 63
td 2010/01/04
td $125,250
tr
td Zorita Serrano
td Software Engineer
td San Francisco
td 56
td 2012/06/01
td $115,000
tr
td Jennifer Acosta
td Junior Javascript Developer
td Edinburgh
td 43
td 2013/02/01
td $75,650
tr
td Cara Stevens
td Sales Assistant
td New York
td 46
td 2011/12/06
td $145,600
tr
td Hermione Butler
td Regional Director
td London
td 47
td 2011/03/21
td $356,250
tr
td Lael Greer
td Systems Administrator
td London
td 21
td 2009/02/27
td $103,500
tr
td Jonas Alexander
td Developer
td San Francisco
td 30
td 2010/07/14
td $86,500
tr
td Shad Decker
td Regional Director
td Edinburgh
td 51
td 2008/11/13
td $183,000
tr
td Michael Bruce
td Javascript Developer
td Singapore
td 29
td 2011/06/27
td $183,000
tr
td Donna Snider
td Customer Support
td New York
td 27
td 2011/01/25
td $112,000
// Row grouping Ends
// Footer callback Starts
.col-sm-12
.card
.card-header
h5 Footer callback
span
| Through the use of the header and footer callback manipulation functions provided by DataTables (
code.option(title='DataTables initialisation option') headerCallback:option
| and
code.option(title='DataTables initialisation option') footerCallback:option
| ), it is possible to
| perform some powerful and useful data manipulation functions, such as summarising data in the table.
span
| The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the
code.api(title='DataTables API method') column().data():API
| API method and
code.api(title='DataTables API method') column().footer():API
| for writing the value into the
| footer.
.card-body.table-responsive
table#advance-12.display
thead
tr
th First name
th Last name
th Position
th Office
th Salary
tbody
tr
td Tiger
td Nixon
td System Architect
td Edinburgh
td $320,800
tr
td Garrett
td Winters
td Accountant
td Tokyo
td $170,750
tr
td Ashton
td Cox
td Junior Technical Author
td San Francisco
td $86,000
tr
td Cedric
td Kelly
td Senior Javascript Developer
td Edinburgh
td $433,060
tr
td Airi
td Satou
td Accountant
td Tokyo
td $162,700
tr
td Brielle
td Williamson
td Integration Specialist
td New York
td $372,000
tr
td Herrod
td Chandler
td Sales Assistant
td San Francisco
td $137,500
tr
td Rhona
td Davidson
td Integration Specialist
td Tokyo
td $327,900
tr
td Colleen
td Hurst
td Javascript Developer
td San Francisco
td $205,500
tr
td Sonya
td Frost
td Software Engineer
td Edinburgh
td $103,600
tr
td Jena
td Gaines
td Office Manager
td London
td $90,560
tr
td Quinn
td Flynn
td Support Lead
td Edinburgh
td $342,000
tr
td Charde
td Marshall
td Regional Director
td San Francisco
td $470,600
tr
td Haley
td Kennedy
td Senior Marketing Designer
td London
td $313,500
tr
td Tatyana
td Fitzpatrick
td Regional Director
td London
td $385,750
tr
td Michael
td Silva
td Marketing Designer
td London
td $198,500
tr
td Paul
td Byrd
td Chief Financial Officer (CFO)
td New York
td $725,000
tr
td Gloria
td Little
td Systems Administrator
td New York
td $237,500
tr
td Bradley
td Greer
td Software Engineer
td London
td $132,000
tr
td Dai
td Rios
td Personnel Lead
td Edinburgh
td $217,500
tr
td Jenette
td Caldwell
td Development Lead
td New York
td $345,000
tr
td Yuri
td Berry
td Chief Marketing Officer (CMO)
td New York
td $675,000
tr
td Caesar
td Vance
td Pre-Sales Support
td New York
td $106,450
tr
td Doris
td Wilder
td Sales Assistant
td Sidney
td $85,600
tr
td Angelica
td Ramos
td Chief Executive Officer (CEO)
td London
td $1,200,000
tr
td Gavin
td Joyce
td Developer
td Edinburgh
td $92,575
tr
td Jennifer
td Chang
td Regional Director
td Singapore
td $357,650
tr
td Brenden
td Wagner
td Software Engineer
td San Francisco
td $206,850
tr
td Fiona
td Green
td Chief Operating Officer (COO)
td San Francisco
td $850,000
tr
td Shou
td Itou
td Regional Marketing
td Tokyo
td $163,000
tr
td Michelle
td House
td Integration Specialist
td Sidney
td $95,400
tr
td Suki
td Burks
td Developer
td London
td $114,500
tr
td Prescott
td Bartlett
td Technical Author
td London
td $145,000
tr
td Gavin
td Cortez
td Team Leader
td San Francisco
td $235,500
tr
td Martena
td Mccray
td Post-Sales support
td Edinburgh
td $324,050
tr
td Unity
td Butler
td Marketing Designer
td San Francisco
td $85,675
tr
td Howard
td Hatfield
td Office Manager
td San Francisco
td $164,500
tr
td Hope
td Fuentes
td Secretary
td San Francisco
td $109,850
tr
td Vivian
td Harrell
td Financial Controller
td San Francisco
td $452,500
tr
td Timothy
td Mooney
td Office Manager
td London
td $136,200
tr
td Jackson
td Bradshaw
td Director
td New York
td $645,750
tr
td Olivia
td Liang
td Support Engineer
td Singapore
td $234,500
tr
td Bruno
td Nash
td Software Engineer
td London
td $163,500
tr
td Sakura
td Yamamoto
td Support Engineer
td Tokyo
td $139,575
tr
td Thor
td Walton
td Developer
td New York
td $98,540
tr
td Finn
td Camacho
td Support Engineer
td San Francisco
td $87,500
tr
td Serge
td Baldwin
td Data Coordinator
td Singapore
td $138,575
tr
td Zenaida
td Frank
td Software Engineer
td New York
td $125,250
tr
td Zorita
td Serrano
td Software Engineer
td San Francisco
td $115,000
tr
td Jennifer
td Acosta
td Junior Javascript Developer
td Edinburgh
td $75,650
tr
td Cara
td Stevens
td Sales Assistant
td New York
td $145,600
tr
td Hermione
td Butler
td Regional Director
td London
td $356,250
tr
td Lael
td Greer
td Systems Administrator
td London
td $103,500
tr
td Jonas
td Alexander
td Developer
td San Francisco
td $86,500
tr
td Shad
td Decker
td Regional Director
td Edinburgh
td $183,000
tr
td Michael
td Bruce
td Javascript Developer
td Singapore
td $183,000
tr
td Donna
td Snider
td Customer Support
td New York
td $112,000
// Footer callback Ends
// Custom toolbar elements Starts
.col-sm-12
.card
.card-header
h5 Footer callback
span
| DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom
| elements. In this example a
code.tag(title='HTML tag') div
| with a class of '-string toolbar' is created using
code.option(title='DataTables initialisation option') dom
| , and jQuery then used to insert HTML into
| that element to create the toolbar. You could put whatever HTML you want into the toolbar!
span
| For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins
| which are used in a table by a single character reference in the
code.option(title='DataTables initialisation option') dom
| option (like the built in option of
code.string(title='String') f
| refers to 'filtering input',
| you could have an
code.string(title='String') F
| option which creates your own filtering input control, custom to your app).
span
| There are a number of extensions for DataTables that make use of this ability. For example, Buttons is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to
| Excel / PDF, and more).
.card-body.table-responsive
table#advance-13.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
// Custom toolbar elements Ends
// Order direction sequence control Starts
.col-sm-12
.card
.card-header
h5 Order direction sequence control
span
| At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default
| ascending. This can be done through the use of the
code.option(title='DataTables initialisation option') columns.orderSequence:option
| initialisation parameter. This parameter also allows you to limit the ordering to a single
| direction, or you could add complex behaviour to the ordering interaction.
.card-body.table-responsive
table#advance-14.display
thead
tr
th Name
th Position
th Office
th Age
th Start date
th Salary
tbody
tr
td Tiger Nixon
td System Architect
td Edinburgh
td 61
td 2011/04/25
td $320,800
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