6110 lines
308 KiB
Plaintext
6110 lines
308 KiB
Plaintext
- var datatable = true;
|
|
- var page_datatable = true;
|
|
- var theme_customizer = true;
|
|
- var tooltip = true;
|
|
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| 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 t.nixon@datatables.net
|
|
tr
|
|
td Garrett Winters
|
|
td Accountant
|
|
td $170,750
|
|
td Tokyo
|
|
td 8422
|
|
td g.winters@datatables.net
|
|
tr
|
|
td Ashton Cox
|
|
td Junior Technical Author
|
|
td $86,000
|
|
td San Francisco
|
|
td 1562
|
|
td a.cox@datatables.net
|
|
tr
|
|
td Cedric Kelly
|
|
td Senior Javascript Developer
|
|
td $433,060
|
|
td Edinburgh
|
|
td 6224
|
|
td c.kelly@datatables.net
|
|
tr
|
|
td Airi Satou
|
|
td Accountant
|
|
td $162,700
|
|
td Tokyo
|
|
td 5407
|
|
td a.satou@datatables.net
|
|
tr
|
|
td Brielle Williamson
|
|
td Integration Specialist
|
|
td $372,000
|
|
td New York
|
|
td 4804
|
|
td b.williamson@datatables.net
|
|
tr
|
|
td Herrod Chandler
|
|
td Sales Assistant
|
|
td $137,500
|
|
td San Francisco
|
|
td 9608
|
|
td h.chandler@datatables.net
|
|
tr
|
|
td Rhona Davidson
|
|
td Integration Specialist
|
|
td $327,900
|
|
td Tokyo
|
|
td 6200
|
|
td r.davidson@datatables.net
|
|
tr
|
|
td Colleen Hurst
|
|
td Javascript Developer
|
|
td $205,500
|
|
td San Francisco
|
|
td 2360
|
|
td c.hurst@datatables.net
|
|
tr
|
|
td Sonya Frost
|
|
td Software Engineer
|
|
td $103,600
|
|
td Edinburgh
|
|
td 1667
|
|
td s.frost@datatables.net
|
|
tr
|
|
td Jena Gaines
|
|
td Office Manager
|
|
td $90,560
|
|
td London
|
|
td 3814
|
|
td j.gaines@datatables.net
|
|
tr
|
|
td Quinn Flynn
|
|
td Support Lead
|
|
td $342,000
|
|
td Edinburgh
|
|
td 9497
|
|
td q.flynn@datatables.net
|
|
tr
|
|
td Charde Marshall
|
|
td Regional Director
|
|
td $470,600
|
|
td San Francisco
|
|
td 6741
|
|
td c.marshall@datatables.net
|
|
tr
|
|
td Haley Kennedy
|
|
td Senior Marketing Designer
|
|
td $313,500
|
|
td London
|
|
td 3597
|
|
td h.kennedy@datatables.net
|
|
tr
|
|
td Tatyana Fitzpatrick
|
|
td Regional Director
|
|
td $385,750
|
|
td London
|
|
td 1965
|
|
td t.fitzpatrick@datatables.net
|
|
tr
|
|
td Michael Silva
|
|
td Marketing Designer
|
|
td $198,500
|
|
td London
|
|
td 1581
|
|
td m.silva@datatables.net
|
|
tr
|
|
td Paul Byrd
|
|
td Chief Financial Officer (CFO)
|
|
td $725,000
|
|
td New York
|
|
td 3059
|
|
td p.byrd@datatables.net
|
|
tr
|
|
td Gloria Little
|
|
td Systems Administrator
|
|
td $237,500
|
|
td New York
|
|
td 1721
|
|
td g.little@datatables.net
|
|
tr
|
|
td Bradley Greer
|
|
td Software Engineer
|
|
td $132,000
|
|
td London
|
|
td 2558
|
|
td b.greer@datatables.net
|
|
tr
|
|
td Dai Rios
|
|
td Personnel Lead
|
|
td $217,500
|
|
td Edinburgh
|
|
td 2290
|
|
td d.rios@datatables.net
|
|
tr
|
|
td Jenette Caldwell
|
|
td Development Lead
|
|
td $345,000
|
|
td New York
|
|
td 1937
|
|
td j.caldwell@datatables.net
|
|
tr
|
|
td Yuri Berry
|
|
td Chief Marketing Officer (CMO)
|
|
td $675,000
|
|
td New York
|
|
td 6154
|
|
td y.berry@datatables.net
|
|
tr
|
|
td Caesar Vance
|
|
td Pre-Sales Support
|
|
td $106,450
|
|
td New York
|
|
td 8330
|
|
td c.vance@datatables.net
|
|
tr
|
|
td Doris Wilder
|
|
td Sales Assistant
|
|
td $85,600
|
|
td Sidney
|
|
td 3023
|
|
td d.wilder@datatables.net
|
|
tr
|
|
td Angelica Ramos
|
|
td Chief Executive Officer (CEO)
|
|
td $1,200,000
|
|
td London
|
|
td 5797
|
|
td a.ramos@datatables.net
|
|
tr
|
|
td Gavin Joyce
|
|
td Developer
|
|
td $92,575
|
|
td Edinburgh
|
|
td 8822
|
|
td g.joyce@datatables.net
|
|
tr
|
|
td Jennifer Chang
|
|
td Regional Director
|
|
td $357,650
|
|
td Singapore
|
|
td 9239
|
|
td j.chang@datatables.net
|
|
tr
|
|
td Brenden Wagner
|
|
td Software Engineer
|
|
td $206,850
|
|
td San Francisco
|
|
td 1314
|
|
td b.wagner@datatables.net
|
|
tr
|
|
td Fiona Green
|
|
td Chief Operating Officer (COO)
|
|
td $850,000
|
|
td San Francisco
|
|
td 2947
|
|
td f.green@datatables.net
|
|
tr
|
|
td Shou Itou
|
|
td Regional Marketing
|
|
td $163,000
|
|
td Tokyo
|
|
td 8899
|
|
td s.itou@datatables.net
|
|
tr
|
|
td Michelle House
|
|
td Integration Specialist
|
|
td $95,400
|
|
td Sidney
|
|
td 2769
|
|
td m.house@datatables.net
|
|
tr
|
|
td Suki Burks
|
|
td Developer
|
|
td $114,500
|
|
td London
|
|
td 6832
|
|
td s.burks@datatables.net
|
|
tr
|
|
td Prescott Bartlett
|
|
td Technical Author
|
|
td $145,000
|
|
td London
|
|
td 3606
|
|
td p.bartlett@datatables.net
|
|
tr
|
|
td Gavin Cortez
|
|
td Team Leader
|
|
td $235,500
|
|
td San Francisco
|
|
td 2860
|
|
td g.cortez@datatables.net
|
|
tr
|
|
td Martena Mccray
|
|
td Post-Sales support
|
|
td $324,050
|
|
td Edinburgh
|
|
td 8240
|
|
td m.mccray@datatables.net
|
|
tr
|
|
td Unity Butler
|
|
td Marketing Designer
|
|
td $85,675
|
|
td San Francisco
|
|
td 5384
|
|
td u.butler@datatables.net
|
|
tr
|
|
td Howard Hatfield
|
|
td Office Manager
|
|
td $164,500
|
|
td San Francisco
|
|
td 7031
|
|
td h.hatfield@datatables.net
|
|
tr
|
|
td Hope Fuentes
|
|
td Secretary
|
|
td $109,850
|
|
td San Francisco
|
|
td 6318
|
|
td h.fuentes@datatables.net
|
|
tr
|
|
td Vivian Harrell
|
|
td Financial Controller
|
|
td $452,500
|
|
td San Francisco
|
|
td 9422
|
|
td v.harrell@datatables.net
|
|
tr
|
|
td Timothy Mooney
|
|
td Office Manager
|
|
td $136,200
|
|
td London
|
|
td 7580
|
|
td t.mooney@datatables.net
|
|
tr
|
|
td Jackson Bradshaw
|
|
td Director
|
|
td $645,750
|
|
td New York
|
|
td 1042
|
|
td j.bradshaw@datatables.net
|
|
tr
|
|
td Olivia Liang
|
|
td Support Engineer
|
|
td $234,500
|
|
td Singapore
|
|
td 2120
|
|
td o.liang@datatables.net
|
|
tr
|
|
td Bruno Nash
|
|
td Software Engineer
|
|
td $163,500
|
|
td London
|
|
td 6222
|
|
td b.nash@datatables.net
|
|
tr
|
|
td Sakura Yamamoto
|
|
td Support Engineer
|
|
td $139,575
|
|
td Tokyo
|
|
td 9383
|
|
td s.yamamoto@datatables.net
|
|
tr
|
|
td Thor Walton
|
|
td Developer
|
|
td $98,540
|
|
td New York
|
|
td 8327
|
|
td t.walton@datatables.net
|
|
tr
|
|
td Finn Camacho
|
|
td Support Engineer
|
|
td $87,500
|
|
td San Francisco
|
|
td 2927
|
|
td f.camacho@datatables.net
|
|
tr
|
|
td Serge Baldwin
|
|
td Data Coordinator
|
|
td $138,575
|
|
td Singapore
|
|
td 8352
|
|
td s.baldwin@datatables.net
|
|
tr
|
|
td Zenaida Frank
|
|
td Software Engineer
|
|
td $125,250
|
|
td New York
|
|
td 7439
|
|
td z.frank@datatables.net
|
|
tr
|
|
td Zorita Serrano
|
|
td Software Engineer
|
|
td $115,000
|
|
td San Francisco
|
|
td 4389
|
|
td z.serrano@datatables.net
|
|
tr
|
|
td Jennifer Acosta
|
|
td Junior Javascript Developer
|
|
td $75,650
|
|
td Edinburgh
|
|
td 3431
|
|
td j.acosta@datatables.net
|
|
tr
|
|
td Cara Stevens
|
|
td Sales Assistant
|
|
td $145,600
|
|
td New York
|
|
td 3990
|
|
td c.stevens@datatables.net
|
|
tr
|
|
td Hermione Butler
|
|
td Regional Director
|
|
td $356,250
|
|
td London
|
|
td 1016
|
|
td h.butler@datatables.net
|
|
tr
|
|
td Lael Greer
|
|
td Systems Administrator
|
|
td $103,500
|
|
td London
|
|
td 6733
|
|
td l.greer@datatables.net
|
|
tr
|
|
td Jonas Alexander
|
|
td Developer
|
|
td $86,500
|
|
td San Francisco
|
|
td 8196
|
|
td j.alexander@datatables.net
|
|
tr
|
|
td Shad Decker
|
|
td Regional Director
|
|
td $183,000
|
|
td Edinburgh
|
|
td 6373
|
|
td s.decker@datatables.net
|
|
tr
|
|
td Michael Bruce
|
|
td Javascript Developer
|
|
td $183,000
|
|
td Singapore
|
|
td 5384
|
|
td m.bruce@datatables.net
|
|
tr
|
|
td Donna Snider
|
|
td Customer Support
|
|
td $112,000
|
|
td New York
|
|
td 4226
|
|
td d.snider@datatables.net
|
|
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
|