finishing it
This commit is contained in:
kicap
22
static/plugin/datatables/extensions/Responsive/License.txt
Normal file
22
static/plugin/datatables/extensions/Responsive/License.txt
Normal file
@ -0,0 +1,22 @@
|
||||
MIT license
|
||||
|
||||
Copyright (c) 2014-2015 SpryMedia Limited
|
||||
http://datatables.net
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
41
static/plugin/datatables/extensions/Responsive/Readme.md
Normal file
41
static/plugin/datatables/extensions/Responsive/Readme.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Responsive
|
||||
|
||||
Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens.
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
To use Responsive the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](http://datatables.net/extensions/responsive/) for full details.
|
||||
|
||||
## NPM and Bower
|
||||
|
||||
If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net-responsive`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
|
||||
|
||||
Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
|
||||
|
||||
|
||||
# Basic usage
|
||||
|
||||
Responsive is initialised using the `responsive` option in the DataTables constructor - a simple boolean `true` will enable the feature. Further options can be specified using this option as an object - see the documentation for details.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
$(document).ready( function () {
|
||||
$('#myTable').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
# Documentation / support
|
||||
|
||||
* [Documentation](https://datatables.net/extensions/responsive/)
|
||||
* [DataTables support forums](http://datatables.net/forums)
|
||||
|
||||
|
||||
# GitHub
|
||||
|
||||
If you fancy getting involved with the development of Responsive and help make it better, please refer to its [GitHub repo](https://github.com/DataTables/Responsive).
|
||||
|
||||
@ -0,0 +1,181 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #337ab7;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #337ab7;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
div.dtr-bs-modal table.table tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:9px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#337ab7}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#337ab7}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none}
|
||||
@ -0,0 +1,181 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 12px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #0275d8;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #0275d8;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
div.dtr-bs-modal table.table tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.bootstrap4.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.bootstrap4.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:12px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#0275d8}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none}
|
||||
@ -0,0 +1,178 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #31b131;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #31b131;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.dataTables.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.dataTables.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:9px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#31b131}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#31b131}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}
|
||||
@ -0,0 +1,181 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #008CBA;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #008CBA;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
font-size: 1em;
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.foundation.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.foundation.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:9px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#008CBA}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#008CBA}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}table.dataTable>tbody>tr.child ul{font-size:1em}
|
||||
@ -0,0 +1,178 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #31b131;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #31b131;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.jqueryui.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.jqueryui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:9px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#31b131}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#31b131}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}
|
||||
@ -0,0 +1,181 @@
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
|
||||
cursor: default !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
|
||||
display: none !important;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
|
||||
top: 9px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #21ba45;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed > tbody > tr.child td:before {
|
||||
display: none;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child {
|
||||
padding-left: 27px;
|
||||
}
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td:first-child:before,
|
||||
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th:first-child:before {
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
border-radius: 14px;
|
||||
line-height: 14px;
|
||||
text-indent: 3px;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr > td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr > th.control:before {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 0 3px #444;
|
||||
box-sizing: content-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 14px;
|
||||
content: '+';
|
||||
background-color: #21ba45;
|
||||
}
|
||||
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
|
||||
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
|
||||
content: '-';
|
||||
background-color: #d33333;
|
||||
}
|
||||
table.dataTable > tbody > tr.child {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
table.dataTable > tbody > tr.child:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li {
|
||||
border-bottom: 1px solid #efefef;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
table.dataTable > tbody > tr.child ul li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
table.dataTable > tbody > tr.child span.dtr-title {
|
||||
display: inline-block;
|
||||
min-width: 75px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.dtr-modal {
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
padding: 10em 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
margin: auto;
|
||||
z-index: 102;
|
||||
overflow: auto;
|
||||
background-color: #f5f5f7;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-content {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f9f9f9;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
z-index: 12;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-close:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
div.dtr-modal div.dtr-modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 101;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dtr-modal div.dtr-modal-display {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
div.dtr-bs-modal table.table tr:first-child td {
|
||||
border-top: none;
|
||||
}
|
||||
1
static/plugin/datatables/extensions/Responsive/css/responsive.semanticui.min.css
vendored
Normal file
1
static/plugin/datatables/extensions/Responsive/css/responsive.semanticui.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{cursor:default !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th.child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before{display:none !important}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child{position:relative;padding-left:30px;cursor:pointer}table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before{top:9px;left:4px;height:14px;width:14px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#21ba45}table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{content:'-';background-color:#d33333}table.dataTable.dtr-inline.collapsed>tbody>tr.child td:before{display:none}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child{padding-left:27px}table.dataTable.dtr-inline.collapsed.compact>tbody>tr>td:first-child:before,table.dataTable.dtr-inline.collapsed.compact>tbody>tr>th:first-child:before{top:5px;left:4px;height:14px;width:14px;border-radius:14px;line-height:14px;text-indent:3px}table.dataTable.dtr-column>tbody>tr>td.control,table.dataTable.dtr-column>tbody>tr>th.control{position:relative;cursor:pointer}table.dataTable.dtr-column>tbody>tr>td.control:before,table.dataTable.dtr-column>tbody>tr>th.control:before{top:50%;left:50%;height:16px;width:16px;margin-top:-10px;margin-left:-10px;display:block;position:absolute;color:white;border:2px solid white;border-radius:14px;box-shadow:0 0 3px #444;box-sizing:content-box;text-align:center;font-family:'Courier New', Courier, monospace;line-height:14px;content:'+';background-color:#21ba45}table.dataTable.dtr-column>tbody>tr.parent td.control:before,table.dataTable.dtr-column>tbody>tr.parent th.control:before{content:'-';background-color:#d33333}table.dataTable>tbody>tr.child{padding:0.5em 1em}table.dataTable>tbody>tr.child:hover{background:transparent !important}table.dataTable>tbody>tr.child ul{display:inline-block;list-style-type:none;margin:0;padding:0}table.dataTable>tbody>tr.child ul li{border-bottom:1px solid #efefef;padding:0.5em 0}table.dataTable>tbody>tr.child ul li:first-child{padding-top:0}table.dataTable>tbody>tr.child ul li:last-child{border-bottom:none}table.dataTable>tbody>tr.child span.dtr-title{display:inline-block;min-width:75px;font-weight:bold}div.dtr-modal{position:fixed;box-sizing:border-box;top:0;left:0;height:100%;width:100%;z-index:100;padding:10em 1em}div.dtr-modal div.dtr-modal-display{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;overflow:auto;margin:auto;z-index:102;overflow:auto;background-color:#f5f5f7;border:1px solid black;border-radius:0.5em;box-shadow:0 12px 30px rgba(0,0,0,0.6)}div.dtr-modal div.dtr-modal-content{position:relative;padding:1em}div.dtr-modal div.dtr-modal-close{position:absolute;top:6px;right:6px;width:22px;height:22px;border:1px solid #eaeaea;background-color:#f9f9f9;text-align:center;border-radius:3px;cursor:pointer;z-index:12}div.dtr-modal div.dtr-modal-close:hover{background-color:#eaeaea}div.dtr-modal div.dtr-modal-background{position:fixed;top:0;left:0;right:0;bottom:0;z-index:101;background:rgba(0,0,0,0.6)}@media screen and (max-width: 767px){div.dtr-modal div.dtr-modal-display{width:95%}}div.dtr-bs-modal table.table tr:first-child td{border-top:none}
|
||||
@ -0,0 +1,923 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Column controlled child rows</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column'
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: 0
|
||||
} ],
|
||||
order: [ 1, 'asc' ]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Column controlled child rows</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive has two built in methods for displaying the controlling element of the child rows; <code>inline</code> which is the default option and shows the
|
||||
control in the first column, and <code>column</code> which set a <em>control column</em> as the control. The control column is shown only when there is some other
|
||||
column hidden, and is dedicated only to the show / hide control for the rows.</p>
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.type"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.type</code></a> option set to <code>column</code> to activate the control column. Note that by default the
|
||||
first column is used as the control, so additionally in the initialisation the <a href="//datatables.net/reference/option/order"><code class="option" title=
|
||||
"DataTables initialisation option">order</code></a> and <a href="//datatables.net/reference/option/columns.orderable"><code class="option" title=
|
||||
"DataTables initialisation option">columns.orderable</code></a> options are used to disable sorting on this column.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column'
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: 0
|
||||
} ],
|
||||
order: [ 1, 'asc' ]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,925 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Custom child row renderer</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
renderer: function ( api, rowIdx, columns ) {
|
||||
var data = $.map( columns, function ( col, i ) {
|
||||
return col.hidden ?
|
||||
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
||||
'<td>'+col.title+':'+'</td> '+
|
||||
'<td>'+col.data+'</td>'+
|
||||
'</tr>' :
|
||||
'';
|
||||
} ).join('');
|
||||
|
||||
return data ?
|
||||
$('<table/>').append( data ) :
|
||||
false;
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Custom child row renderer</span></h1>
|
||||
<div class="info">
|
||||
<p>The child row's for a collapsed table in Responsive, by default, show a <code class="tag" title="HTML tag">ul/li</code> list of the data from the hidden
|
||||
columns. The <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option provide the ability to create your own custom renderer. It is given three
|
||||
parameters: the DataTables API instance for the table, the row index to use and an array of information about the columns - please refer to the <a href=
|
||||
"//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> documentation for full details of the object structure used in the array for each
|
||||
column.</p>
|
||||
<p>This example shows the <code>columns</code> parameter that is passed in to display information only about the columns that Responsive has hidden. You could
|
||||
refine this to select only certain columns, or show all columns, etc.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
renderer: function ( api, rowIdx, columns ) {
|
||||
var data = $.map( columns, function ( col, i ) {
|
||||
return col.hidden ?
|
||||
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
|
||||
'<td>'+col.title+':'+'</td> '+
|
||||
'<td>'+col.data+'</td>'+
|
||||
'</tr>' :
|
||||
'';
|
||||
} ).join('');
|
||||
|
||||
return data ?
|
||||
$('<table/>').append( data ) :
|
||||
false;
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,890 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Disable child rows</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: false
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Disable child rows</span></h1>
|
||||
<div class="info">
|
||||
<p>By default, when Responsive collapses a table, it will show an option for the end user to expand the row, showing the details of the hidden columns in a child
|
||||
row. This can be disabled using the <a href="//datatables.net/reference/option/responsive.details"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details</code></a> option and setting it to <code>false</code>, as shown in the example below. In this case the
|
||||
hidden data is not directly accessible to the end user.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: false
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Child row control</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Child row control</span></h1>
|
||||
<div class="info">
|
||||
<p>When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables <em>child row</em> (see
|
||||
<a href="//datatables.net/reference/api/row().child()"><code class="api" title="DataTables API method">row().child()</code></a>). By default Responsive will show
|
||||
child row controls in the first column when the table has been collapsed, allowing the end user to show / hide the information from the hidden columns.</p>
|
||||
<p>Responsive has a number of options for display of the child rows:</p>
|
||||
<ul class="markdown">
|
||||
<li>If child row display is enabled: <a href="//datatables.net/reference/option/responsive.details"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details</code></a>
|
||||
</li>
|
||||
<li>How the show / hide control is displayed: <a href="//datatables.net/reference/option/responsive.details.type"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.type</code></a>
|
||||
</li>
|
||||
<li>How the child row is rendered: <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>This section shows examples of these options being used.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,919 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Column control - right</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column',
|
||||
target: -1
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: -1
|
||||
} ]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Column control - right</span></h1>
|
||||
<div class="info">
|
||||
<p>When using the <code>column</code> child row control type, Responsive has the ability to use any column or element as the show / hide control for the row
|
||||
details. This is provided through the <a href="//datatables.net/reference/option/responsive.details.target"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.target</code></a> option, which can be either a column index, or a jQuery selector.</p>
|
||||
<p>This example shows the last column in the table being used as the control column.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column',
|
||||
target: -1
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: -1
|
||||
} ]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,921 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Whole row child row control</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column',
|
||||
target: 'tr'
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: 0
|
||||
} ],
|
||||
order: [ 1, 'asc' ]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Whole row child row control</span></h1>
|
||||
<div class="info">
|
||||
<p>When using the <code>column</code> details type in Responsive the <a href="//datatables.net/reference/option/responsive.details.target"><code class="option"
|
||||
title="Responsive initialisation option">responsive.details.target</code></a> option provides the ability to control what element is used to show / hide the child
|
||||
rows when the table is collapsed.</p>
|
||||
<p>This example uses the <code>tr</code> selector to have the whole row act as the control.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
type: 'column',
|
||||
target: 'tr'
|
||||
}
|
||||
},
|
||||
columnDefs: [ {
|
||||
className: 'control',
|
||||
orderable: false,
|
||||
targets: 0
|
||||
} ],
|
||||
order: [ 1, 'asc' ]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Child rows</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,883 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Automatic column hiding</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Automatic column hiding</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a
|
||||
column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause
|
||||
the table to overflow the viewport, with the columns being removed from the right.</p>
|
||||
<p>This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile
|
||||
browser, change the screen's orientation.</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,306 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Class control</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" },
|
||||
{ "data": "extn" }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Class control</span></h1>
|
||||
<div class="info">
|
||||
<p>You can tell Responsive what columns to want to be visible on different devices through the use of class names on the columns. The breakpoints are horizontal
|
||||
screen resolutions and the defaults are set for common devices:</p>
|
||||
<ul class="markdown">
|
||||
<li><code>desktop</code> x >= 1024px</li>
|
||||
<li><code>tablet-l</code> (landscape) 768 <= x < 1024</li>
|
||||
<li><code>tablet-p</code> (portrait) 480 <= x < 768</li>
|
||||
<li><code>mobile-l</code> (landscape) 320 <= x < 480</li>
|
||||
<li><code>mobile-p</code> (portrait) x < 320</li>
|
||||
</ul>
|
||||
<p>You may leave the <code>-[lp]</code> option from the end if you wish to just target all tablet or mobile devices. Additionally to may add <code>min-</code>,
|
||||
<code>max-</code> or <code>not-</code> as a prefix to the class name to perform logic operations. For example <code>not-mobile</code> would cause a column to
|
||||
appear as visible on desktop and tablet devices, while <code>min-tablet-l</code> would require at least a horizontal width of 768 for the browser window to be
|
||||
shown, and be shown at all sizes larger.</p>
|
||||
<p>Additionally, there are three special class names:</p>
|
||||
<ul class="markdown">
|
||||
<li><code>all</code> - Always display</li>
|
||||
<li><code>none</code> - Don't display as a column, but show in the child row</li>
|
||||
<li><code>never</code> - Never display</li>
|
||||
<li>
|
||||
<code>control</code> - Used for the <code>column</code> <a href="//datatables.net/reference/option/responsive.details.type"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.type</code></a> option.
|
||||
</li>
|
||||
</ul>
|
||||
<p>Please <a href="//datatables.net/extensions/responsive/">refer to the Responsive manual</a> for further details of these options.</p>
|
||||
<p>This example shows the <code>salary</code> column visible on a desktop only - <code>office</code> requires a tablet, while the <code>position</code> column
|
||||
requires a phone in landscape or larger. The <code>name</code> column is always visible and the <code>start date</code> is never visible.</p>
|
||||
<p>This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of <code>mobile</code> and
|
||||
<code>not-mobile</code> on two different columns would allow information to be formatted suitable for each device type.</p>
|
||||
</div>
|
||||
<div id="breakpoint"></div>
|
||||
<table id="example" class="display responsive" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="all">Name</th>
|
||||
<th class="min-phone-l">Position</th>
|
||||
<th class="min-tablet">Office</th>
|
||||
<th class="never">Start date</th>
|
||||
<th class="desktop">Salary</th>
|
||||
<th class="none">Extn.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" },
|
||||
{ "data": "extn" }
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,895 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - With ColReorder</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../ColReorder/css/colReorder.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../ColReorder/js/dataTables.colReorder.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true,
|
||||
colReorder: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>With ColReorder</span></h1>
|
||||
<div class="info">
|
||||
<p>This example demonstrates the use of Responsive with the <a href="https://datatables.net/extensions/colreorder">ColReorder extension</a> for DataTables, which
|
||||
provides the ability to reorder columns using click and drag on the column headers.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true,
|
||||
colReorder: true
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../ColReorder/js/dataTables.colReorder.js">../../../ColReorder/js/dataTables.colReorder.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../ColReorder/css/colReorder.dataTables.css">../../../ColReorder/css/colReorder.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,905 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - With Buttons - Column visibility</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Buttons/css/buttons.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../Buttons/js/dataTables.buttons.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../Buttons/js/buttons.colVis.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'colvis'
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>With Buttons - Column visibility</span></h1>
|
||||
<div class="info">
|
||||
<p><a href="https://datatables.net/extensions/buttons">Buttons</a> is an extension for DataTables that provides a framework for control buttons, and also a number
|
||||
of default button sets. This example shows the use of Responsive with the <a href="//datatables.net/reference/button/colvis"><code class="button" title=
|
||||
"Buttons button type">colvis</code></a> button type, demonstrating how Responsive works with column visibility in DataTables.</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'colvis'
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../Buttons/js/dataTables.buttons.js">../../../Buttons/js/dataTables.buttons.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../Buttons/js/buttons.colVis.js">../../../Buttons/js/buttons.colVis.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../Buttons/css/buttons.dataTables.css">../../../Buttons/css/buttons.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,903 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Column priority</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true,
|
||||
columnDefs: [
|
||||
{ responsivePriority: 1, targets: 0 },
|
||||
{ responsivePriority: 2, targets: -2 }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Column priority</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive will automatically hide columns from the right-hand-side of the table, moving in as the table gets smaller, but it can often be useful to use a
|
||||
custom ordering, giving priority to certain columns (for example an actions buttons column, or a column with important information).</p>
|
||||
<p>Column visibility priority can be defined in Responsive using the <a href="//datatables.net/reference/option/columns.responsivePriority"><code class="option"
|
||||
title="Responsive initialisation option">columns.responsivePriority</code></a> initialisation option in the DataTables column options (<a href=
|
||||
"//datatables.net/reference/option/columns"><code class="option" title="DataTables initialisation option">columns</code></a> or <a href=
|
||||
"//datatables.net/reference/option/columnDefs"><code class="option" title="DataTables initialisation option">columnDefs</code></a>). The priority given is a number
|
||||
with lower values representing a higher priority.</p>
|
||||
<p>This example shows the <em>first name</em> column being given top priority and then the <em>extn.</em> column. Resizing the table will cause the other columns
|
||||
to be removed before these two columns - with the <em>first name</em> column finally taking priority.</p>
|
||||
<p>The column priority can also be defined by a <code>data-priority</code> attribute on the column's header cell (for example <code class="tag" title=
|
||||
"HTML tag"><th data-priority="1">First name</th></code>).</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true,
|
||||
columnDefs: [
|
||||
{ responsivePriority: 1, targets: 0 },
|
||||
{ responsivePriority: 2, targets: -2 }
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,901 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - With FixedHeader</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../FixedHeader/css/fixedHeader.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../FixedHeader/js/dataTables.fixedHeader.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
responsive: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
new $.fn.dataTable.FixedHeader( table );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>With FixedHeader</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows Responsive being used with the DataTables <a href="http://datatables.net/extensions/fixedheader">FixedHeader</a> extension. FixedHeader will
|
||||
lock a table's header to the top of the table, ensuring that the user always knows what each column relates to.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
responsive: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
new $.fn.dataTable.FixedHeader( table );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../FixedHeader/js/dataTables.fixedHeader.js">../../../FixedHeader/js/dataTables.fixedHeader.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../FixedHeader/css/fixedHeader.dataTables.css">../../../FixedHeader/css/fixedHeader.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Column control</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Column control</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive has two modes of operation for controlling the visibility of columns at different display sizes. These two modes can be using either separately or
|
||||
together:</p>
|
||||
<ul class="markdown">
|
||||
<li>Manually assigned class names for breakpoints - Assign a column a class name to tell Responsive which breakpoint(s) to show it in.</li>
|
||||
<li>Automatically - for columns without a breakpoint class name, it will be automatically removed if there is no room available on screen to show it. Columns
|
||||
can be removed in priority order or right-to-left.</li>
|
||||
</ul>
|
||||
<p>This section explores these two options.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Assigned class control</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name", className: "all" },
|
||||
{ "data": "position", className: "min-phone-l" },
|
||||
{ "data": "office", className: "min-tablet" },
|
||||
{ "data": "start_date", className: "never" },
|
||||
{ "data": "salary", className: "desktop" },
|
||||
{ "data": "extn", className: "none" }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Assigned class control</span></h1>
|
||||
<div class="info">
|
||||
<p>This example exactly matches the functionality of the <a href="classes.html">class control example</a> but in this case the classes are assigned using the
|
||||
<a href="//datatables.net/reference/option/columns.className"><code class="option" title="DataTables initialisation option">columns.className</code></a>
|
||||
option.</p>
|
||||
</div>
|
||||
<div id="breakpoint"></div>
|
||||
<table id="example" class="display responsive" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name", className: "all" },
|
||||
{ "data": "position", className: "min-phone-l" },
|
||||
{ "data": "office", className: "min-tablet" },
|
||||
{ "data": "start_date", className: "never" },
|
||||
{ "data": "salary", className: "desktop" },
|
||||
{ "data": "extn", className: "none" }
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Column-control</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./classes.html">Class control</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,934 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Bootstrap modal</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.bootstrap.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Bootstrap modal</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option being used with the <code>modal</code> option, which, when used with the Bootstrap
|
||||
integration for Responsive, will use Bootstrap's native modal display.</p>
|
||||
<p>The built-in <code>modal</code> display option should be executed as a function with optional parameters passed in to control the behaviour of the modal
|
||||
display. In the case of Bootstrap it has only a <code>header</code> option which is a function that should return the title for the modal. If you do not wish to
|
||||
display a title, simply don't use this option.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns (which is the default behaviour) as this looks a bit better in a modal!</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.bootstrap.js">../../../../media/js/dataTables.bootstrap.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.bootstrap.js">../../js/responsive.bootstrap.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap.css">../../../../media/css/dataTables.bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.bootstrap.css">../../css/responsive.bootstrap.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,935 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Bootstrap 4 modal</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap4">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Bootstrap 4 modal</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option being used with the <code>modal</code> option, which, when used with the Bootstrap
|
||||
4 integration for Responsive, will use Bootstrap's native modal display.</p>
|
||||
<p>The built-in <code>modal</code> display option should be executed as a function with optional parameters passed in to control the behaviour of the modal
|
||||
display. In the case of Bootstrap 4 it has only a <code>header</code> option which is a function that should return the title for the modal. If you do not wish to
|
||||
display a title, simply don't use this option.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns (which is the default behaviour) as this looks a bit better in a modal!</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.bootstrap4.js">../../../../media/js/dataTables.bootstrap4.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.bootstrap4.js">../../js/responsive.bootstrap4.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap4.css">../../../../media/css/dataTables.bootstrap4.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.bootstrap4.css">../../css/responsive.bootstrap4.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,932 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Foundation modal</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.foundation.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.foundation.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-foundation">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Foundation modal</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option being used with the <code>modal</code> option, which, when used with the Foundation
|
||||
integration for Responsive, will use Foundation's native modal display.</p>
|
||||
<p>The built-in <code>modal</code> display option should be executed as a function with optional parameters passed in to control the behaviour of the modal
|
||||
display. In the case of Foundation it has only a <code>header</code> option which is a function that should return the title for the modal. If you do not wish to
|
||||
display a title, simply don't use this option.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns (which is the default behaviour) as this looks a bit better in a modal!</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.foundation.js">../../../../media/js/dataTables.foundation.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.foundation.js">../../js/responsive.foundation.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.foundation.css">../../../../media/css/dataTables.foundation.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.foundation.css">../../css/responsive.foundation.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,903 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Immediately show hidden details</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate,
|
||||
type: ''
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Immediately show hidden details</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive has the ability to display the details that it has hidden in a variety of different ways. Its default is to allow the end user to toggle the the
|
||||
display by clicking on a row and showing the information in a DataTables child row. At times it can be useful not to require end user interaction to display the
|
||||
hidden data in a responsive manner, which can be done with the <code>childRowImmediate</code> display type.</p>
|
||||
<p>Display types are set using the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option which should point to a function that will handle the child row display. The built
|
||||
in options are available in the <code>$.fn.dataTable.Responsive.display</code> object. See <a href=
|
||||
"//datatables.net/reference/option/responsive.details.display"><code class="option" title="Responsive initialisation option">responsive.details.display</code></a>
|
||||
for a full list of the options available.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.type"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.type</code></a> option is set to be an empty string in this example to disable the user's ability to toggle
|
||||
the child rows - i.e. in this example the full contents of the table are always visible. This could be removed if you want to retain that ability.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.childRowImmediate,
|
||||
type: ''
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Display options</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Display options</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive will, by default, give end users the ability to show the information that it has hidden in a DataTables child row. However, it is not limited to this
|
||||
behaviour, and in fact has built in options to immediately show the child rows (no interaction required by the end user) and to display the information in a pop-up
|
||||
modal.</p>
|
||||
<p>These options are explored in this section.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,930 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - jQuery UI modal</title>
|
||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.jqueryui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.jqueryui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-jqueryui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>jQuery UI modal</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option being used with the <code>modal</code> option, which, when used with the jQuery UI
|
||||
integration for Responsive, will use jQuery UI's native modal display.</p>
|
||||
<p>The built-in <code>modal</code> display option should be executed as a function with optional parameters passed in to control the behaviour of the modal
|
||||
display. In the case of jQuery UI it has a <code>header</code> option (which is a function that should return the title for the modal) and a <code>modal</code>
|
||||
option which is an object of <a href="http://api.jqueryui.com/dialog">configuration parameters</a> that will be passed to the jQuery UI modal.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns (which is the default behaviour) as this looks a bit better in a modal!</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//code.jquery.com/ui/1.11.4/jquery-ui.js">//code.jquery.com/ui/1.11.4/jquery-ui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.jqueryui.js">../../../../media/js/dataTables.jqueryui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.jqueryui.js">../../js/responsive.jqueryui.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.jqueryui.css">../../../../media/css/dataTables.jqueryui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.jqueryui.css">../../css/responsive.jqueryui.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,934 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Modal details display</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: function ( api, rowIdx, columns ) {
|
||||
var data = $.map( columns, function ( col, i ) {
|
||||
return '<tr>'+
|
||||
'<td>'+col.title+':'+'</td> '+
|
||||
'<td>'+col.data+'</td>'+
|
||||
'</tr>';
|
||||
} ).join('');
|
||||
|
||||
return $('<table/>').append( data );
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Modal details display</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive's default mode to show information that is hidden due to columns being removed from the table is to show the hidden details in a child row (<a href=
|
||||
"//datatables.net/reference/api/row().child()"><code class="api" title="DataTables API method">row().child()</code></a>). However, you may wish to use the child
|
||||
row for other purposes or you may simply wish to use a different method of showing the row's information. This can be achieved with the <code>modal</code> display
|
||||
type.</p>
|
||||
<p>Display types are set using the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option which should point to a function that will handle the child row display - in the
|
||||
example show here we use <code>$.fn.dataTable.Responsive.display.modal()</code> which will return a suitable function. We use the options for this function to
|
||||
specify a header for the modal - if you do not wish to show a header, simply don't specify this option.</p>
|
||||
<p>The display options which are built into Responsive are available in the <code>$.fn.dataTable.Responsive.display</code> object. See <a href=
|
||||
"//datatables.net/reference/option/responsive.details.display"><code class="option" title="Responsive initialisation option">responsive.details.display</code></a>
|
||||
for a full list of the options available.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns, which is the default behaviour.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: function ( api, rowIdx, columns ) {
|
||||
var data = $.map( columns, function ( col, i ) {
|
||||
return '<tr>'+
|
||||
'<td>'+col.title+':'+'</td> '+
|
||||
'<td>'+col.data+'</td>'+
|
||||
'</tr>';
|
||||
} ).join('');
|
||||
|
||||
return $('<table/>').append( data );
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,934 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Semantic UI modal</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'ui table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-semanticui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Semantic UI modal</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the <a href="//datatables.net/reference/option/responsive.details.display"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.display</code></a> option being used with the <code>modal</code> option, which, when used with the Semantic
|
||||
UI integration for Responsive, will use Semantic UI's native modal display.</p>
|
||||
<p>The built-in <code>modal</code> display option should be executed as a function with optional parameters passed in to control the behaviour of the modal
|
||||
display. In the case of Semantic UI integration it has only a <code>header</code> option which is a function that should return the title for the modal. If you do
|
||||
not wish to display a title, simply don't use this option.</p>
|
||||
<p>Additionally, the <a href="//datatables.net/reference/option/responsive.details.renderer"><code class="option" title=
|
||||
"Responsive initialisation option">responsive.details.renderer</code></a> option is used here to display the full data for the row, rather than just the hidden
|
||||
columns (which is the default behaviour) as this looks a bit better in a modal!</p>
|
||||
</div>
|
||||
<table id="example" class="ui celled table nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'ui table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.semanticui.js">../../../../media/js/dataTables.semanticui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.semanticui.js">../../js/responsive.semanticui.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.semanticui.css">../../../../media/css/dataTables.semanticui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.semanticui.css">../../css/responsive.semanticui.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Display-types</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Responsive</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Responsive</span></h1>
|
||||
<div class="info">
|
||||
<p>In the modern world of responsive web design tables can often cause a particular problem for designers due to their row based layout. Responsive is an extension
|
||||
for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the
|
||||
table.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Ajax data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "extn" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Ajax data</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows the Responsive extension working with <a href="//datatables.net/manual/data">Ajax sourced data</a> in the DataTable. Note that no special
|
||||
initialisation is required. Responsive is enabled by adding the <code class="string" title="String">responsive</code> class to the <code class="tag" title=
|
||||
"HTML tag">table</code> element.</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"ajax": "../../../../examples/ajax/data/objects.txt",
|
||||
"columns": [
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "extn" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" }
|
||||
]
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,882 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Class name</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Class name</span></h1>
|
||||
<div class="info">
|
||||
<p>The easiest way to initialise the Responsive extension for DataTables is simply to add the class <code class="string" title="String">responsive</code> to the
|
||||
table's class name. When the DataTable is initialised the Responsive extension will automatically enable itself on these tables.</p>
|
||||
<p>The may also use the class <code>dt-responsive</code> to perform the same action, since <code>responsive</code> may be used in your stylesheet, or may have some
|
||||
other meaning in a CSS framework being used (for example Bootstrap).</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,892 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Default initialisation</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$.extend( $.fn.dataTable.defaults, {
|
||||
responsive: true
|
||||
} );
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Default initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>It can often be useful to be able to set a default value for DataTables' initialisation options, providing a common starting point for initialisation when
|
||||
working with multiple tables over many pages or even just on a single page. DataTables provides that ability through the <code>$.fn.dataTable.defaults</code>
|
||||
object which can have any of the <a href="//datatables.net/reference/option">initialisation options</a> set.</p>
|
||||
<p>Extending that ability, Responsive can also be set to initialise by default, as shown in this example thorugh the
|
||||
<code>$.fn.dataTable.defaults.responsive</code> property. Extending that, <a href="//datatables.net/extensions/responsive/reference/option/">all of the Responsive
|
||||
options</a> can also be set using this configuration option (i.e. use <code>responsive</code> as an object).</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.extend( $.fn.dataTable.defaults, {
|
||||
responsive: true
|
||||
} );
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Initialisation</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive can be run on a DataTable in a number of different ways:</p>
|
||||
<ul class="markdown">
|
||||
<li>By adding the class <code>responsive</code> or <code>dt-responsive</code> to the <code class="tag" title="HTML tag">table</code></li>
|
||||
<li>Using the <a href="//datatables.net/reference/option/responsive"><code class="option" title="Responsive initialisation option">responsive</code></a> option
|
||||
in the DataTables initialisation
|
||||
</li>
|
||||
<li>Use the <code>$.fn.dataTable.Responsive</code> constructor.</li>
|
||||
</ul>
|
||||
<p>This set of examples demonstrates these initialisation options.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,890 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - `new` constructor</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
|
||||
new $.fn.dataTable.Responsive( table );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>`new` constructor</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive will automatically detect new DataTable instances being created on a page and initialise itself if it finds the <a href=
|
||||
"//datatables.net/reference/option/responsive"><code class="option" title="Responsive initialisation option">responsive</code></a> option or
|
||||
<code>responsive</code> class name on the table, as shown in the other examples.</p>
|
||||
<p>The third way of initialising Responsive is manually creating a new instance using the <code>$.fn.dataTable.Responsive</code> class, as shown in this example
|
||||
(the other two methods are provided using this constructor in a <a href="//datatables.net/reference/event/init"><code class="event" title=
|
||||
"DataTables event">init</code></a> event handler!).</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
|
||||
new $.fn.dataTable.Responsive( table );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,889 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Configuration option</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Configuration option</span></h1>
|
||||
<div class="info">
|
||||
<p>The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables
|
||||
initialisation options. This method shows the latter, with the <a href="//datatables.net/reference/option/responsive"><code class="option" title=
|
||||
"Responsive initialisation option">responsive</code></a> option being set to the boolean value <code>true</code>.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/responsive"><code class="option" title="Responsive initialisation option">responsive</code></a> option can be
|
||||
given as a boolean value, or as an object with configuration options. If as a boolean, as in this case, the default options are used.</p>
|
||||
</div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./className.html">Class name</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../styling/index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../styling/bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,898 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Bootstrap styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.bootstrap.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Bootstrap styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the Responsive extension being used with the <a href="http://getbootstrap.com">Bootstrap</a> framework providing the styling.
|
||||
The <a href="//datatables.net/manual/styling/bootstrap">DataTables / Bootstrap integration</a> prove seamless integration for DataTables to be used in a Bootstrap
|
||||
page.</p>
|
||||
<p>Note that the <code>dt-responsive</code> class is used to indicate to the extension that it should be enabled on this page, as <code>responsive</code> <a href=
|
||||
"http://getbootstrap.com/css/#tables-responsive">has special meaning in Bootstrap</a>. The <a href="//datatables.net/reference/option/responsive"><code class=
|
||||
"option" title="Responsive initialisation option">responsive</code></a> option could also be used if required.</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.bootstrap.js">../../../../media/js/dataTables.bootstrap.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.bootstrap.js">../../js/responsive.bootstrap.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap.css">../../../../media/css/dataTables.bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.bootstrap.css">../../css/responsive.bootstrap.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active">
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,899 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Bootstrap 4 styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.bootstrap4.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.bootstrap4.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-bootstrap4">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Bootstrap 4 styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the Responsive extension being used with <a href="http://getbootstrap.com">Bootstrap 4</a> providing the styling. The
|
||||
DataTables / Bootstrap integration provides seamless integration for DataTables to be used in a Bootstrap 4 page.</p>
|
||||
<p>Note that the <code>dt-responsive</code> class is used to indicate to the extension that it should be enabled on this page, as <code>responsive</code> <a href=
|
||||
"http://getbootstrap.com/css/#tables-responsive">has special meaning in Bootstrap</a>. The <a href="//datatables.net/reference/option/responsive"><code class=
|
||||
"option" title="Responsive initialisation option">responsive</code></a> option could be used as an alternative if you prefer to use Javascript initialisation
|
||||
options.</p>
|
||||
</div>
|
||||
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.bootstrap4.js">../../../../media/js/dataTables.bootstrap4.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.bootstrap4.js">../../js/responsive.bootstrap4.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.bootstrap4.css">../../../../media/css/dataTables.bootstrap4.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.bootstrap4.css">../../css/responsive.bootstrap4.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,887 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Compact styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Compact styling</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables' <a href="http://datatables.net/manual/styling/classes">default stylesheet</a> has a number number of features available that can be enabled by
|
||||
including a class name on the DataTable. One of those options is <code>compact</code> which displays the DataTable with less whitespace padding that might other be
|
||||
used to increase the information density of the table. Responsive's own style has support for this <code>compact</code> styling as showing in this example.</p>
|
||||
</div>
|
||||
<table id="example" class="display compact nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,896 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Foundation styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.foundation.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.foundation.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.foundation.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-foundation">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Foundation styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the Responsive extension being used with the <a href="http://foundation.zurb.com">Foundation</a> framework providing the
|
||||
styling. The <a href="//datatables.net/manual/styling/foundation">DataTables / Foundation integration</a> prove seamless integration for DataTables to be used in a
|
||||
Foundation page.</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.foundation.js">../../../../media/js/dataTables.foundation.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.foundation.js">../../js/responsive.foundation.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=
|
||||
"//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.foundation.css">../../../../media/css/dataTables.foundation.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.foundation.css">../../css/responsive.foundation.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<title>Responsive examples - Styling</title>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Styling</span></h1>
|
||||
<div class="info">
|
||||
<p>Responsive requires very little styling information of its own, with styling needed only for the child row display when the table has been collapsed. As such,
|
||||
integrating Responsive with your application should be as simple as including the Javascript and base stylesheet! This section shows Responsive being styling using
|
||||
external CSS frameworks.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,893 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - jQuery UI styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.jqueryui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.jqueryui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.jqueryui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-jqueryui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>jQuery UI styling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and Responsive being used with <a href="http://jqueryui.com/">jQuery UI</a> providing the base styling information.</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.jqueryui.js">../../../../media/js/dataTables.jqueryui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.jqueryui.js">../../js/responsive.jqueryui.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.jqueryui.css">../../../../media/css/dataTables.jqueryui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.jqueryui.css">../../css/responsive.jqueryui.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,892 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Vertical scrolling</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
div.container { max-width: 1200px }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
scrollY: 300,
|
||||
paging: false
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Vertical scrolling</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows Responsive in use with the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
|
||||
"DataTables initialisation option">scrollY</code></a> option to present a scrolling table (instead of using paging as the other Responsive examples do). Responsive
|
||||
will automatically work with the table in such a configuration.</p>
|
||||
<p>Responsive can be used with <a href="//datatables.net/reference/option/scrollX"><code class="option" title=
|
||||
"DataTables initialisation option">scrollX</code></a>, however it is relatively pointless as Responsive will remove columns to ensure that there is no horizontal
|
||||
scrolling!</p>
|
||||
</div>
|
||||
<table id="example" class="display responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable( {
|
||||
scrollY: 300,
|
||||
paging: false
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css">div.container { max-width: 1200px }</code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.dataTables.css">../../css/responsive.dataTables.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,894 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<title>Responsive example - Semantic UI</title>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../media/css/dataTables.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../css/responsive.semanticui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../media/js/dataTables.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/dataTables.responsive.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../js/responsive.semanticui.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body class="dt-example dt-example-semanticui">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>Responsive example <span>Semantic UI</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows DataTables and the Responsive extension being used with <a href="http://semantic-ui.com">Semantic UI</a> providing the styling. The
|
||||
DataTables / Semantic UI integration provides seamless integration for DataTables to be used in a Semantic UI page.</p>
|
||||
</div>
|
||||
<table id="example" class="ui celled table responsive nowrap" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
<td>Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
<td>5421</td>
|
||||
<td>t.nixon@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett</td>
|
||||
<td>Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
<td>8422</td>
|
||||
<td>g.winters@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton</td>
|
||||
<td>Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
<td>1562</td>
|
||||
<td>a.cox@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric</td>
|
||||
<td>Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
<td>6224</td>
|
||||
<td>c.kelly@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
<td>5407</td>
|
||||
<td>a.satou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle</td>
|
||||
<td>Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
<td>4804</td>
|
||||
<td>b.williamson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod</td>
|
||||
<td>Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
<td>9608</td>
|
||||
<td>h.chandler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona</td>
|
||||
<td>Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
<td>6200</td>
|
||||
<td>r.davidson@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen</td>
|
||||
<td>Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
<td>2360</td>
|
||||
<td>c.hurst@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya</td>
|
||||
<td>Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
<td>1667</td>
|
||||
<td>s.frost@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena</td>
|
||||
<td>Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
<td>3814</td>
|
||||
<td>j.gaines@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn</td>
|
||||
<td>Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
<td>9497</td>
|
||||
<td>q.flynn@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde</td>
|
||||
<td>Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
<td>6741</td>
|
||||
<td>c.marshall@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley</td>
|
||||
<td>Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
<td>3597</td>
|
||||
<td>h.kennedy@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana</td>
|
||||
<td>Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
<td>1965</td>
|
||||
<td>t.fitzpatrick@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
<td>1581</td>
|
||||
<td>m.silva@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul</td>
|
||||
<td>Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
<td>3059</td>
|
||||
<td>p.byrd@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria</td>
|
||||
<td>Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
<td>1721</td>
|
||||
<td>g.little@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley</td>
|
||||
<td>Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
<td>2558</td>
|
||||
<td>b.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai</td>
|
||||
<td>Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
<td>2290</td>
|
||||
<td>d.rios@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette</td>
|
||||
<td>Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
<td>1937</td>
|
||||
<td>j.caldwell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri</td>
|
||||
<td>Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
<td>6154</td>
|
||||
<td>y.berry@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar</td>
|
||||
<td>Vance</td>
|
||||
<td>Pre-Sales Support</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$106,450</td>
|
||||
<td>8330</td>
|
||||
<td>c.vance@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica</td>
|
||||
<td>Ramos</td>
|
||||
<td>Chief Executive Officer (CEO)</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$1,200,000</td>
|
||||
<td>5797</td>
|
||||
<td>a.ramos@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$92,575</td>
|
||||
<td>8822</td>
|
||||
<td>g.joyce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Singapore</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$357,650</td>
|
||||
<td>9239</td>
|
||||
<td>j.chang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden</td>
|
||||
<td>Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>28</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$206,850</td>
|
||||
<td>1314</td>
|
||||
<td>b.wagner@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Fiona</td>
|
||||
<td>Green</td>
|
||||
<td>Chief Operating Officer (COO)</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$850,000</td>
|
||||
<td>2947</td>
|
||||
<td>f.green@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shou</td>
|
||||
<td>Itou</td>
|
||||
<td>Regional Marketing</td>
|
||||
<td>Tokyo</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$163,000</td>
|
||||
<td>8899</td>
|
||||
<td>s.itou@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki</td>
|
||||
<td>Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$114,500</td>
|
||||
<td>6832</td>
|
||||
<td>s.burks@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott</td>
|
||||
<td>Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$145,000</td>
|
||||
<td>3606</td>
|
||||
<td>p.bartlett@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin</td>
|
||||
<td>Cortez</td>
|
||||
<td>Team Leader</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$235,500</td>
|
||||
<td>2860</td>
|
||||
<td>g.cortez@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena</td>
|
||||
<td>Mccray</td>
|
||||
<td>Post-Sales support</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$324,050</td>
|
||||
<td>8240</td>
|
||||
<td>m.mccray@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity</td>
|
||||
<td>Butler</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$85,675</td>
|
||||
<td>5384</td>
|
||||
<td>u.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard</td>
|
||||
<td>Hatfield</td>
|
||||
<td>Office Manager</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$164,500</td>
|
||||
<td>7031</td>
|
||||
<td>h.hatfield@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope</td>
|
||||
<td>Fuentes</td>
|
||||
<td>Secretary</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$109,850</td>
|
||||
<td>6318</td>
|
||||
<td>h.fuentes@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian</td>
|
||||
<td>Harrell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$452,500</td>
|
||||
<td>9422</td>
|
||||
<td>v.harrell@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy</td>
|
||||
<td>Mooney</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$136,200</td>
|
||||
<td>7580</td>
|
||||
<td>t.mooney@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson</td>
|
||||
<td>Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$645,750</td>
|
||||
<td>1042</td>
|
||||
<td>j.bradshaw@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Olivia</td>
|
||||
<td>Liang</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$234,500</td>
|
||||
<td>2120</td>
|
||||
<td>o.liang@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno</td>
|
||||
<td>Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$163,500</td>
|
||||
<td>6222</td>
|
||||
<td>b.nash@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sakura</td>
|
||||
<td>Yamamoto</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Tokyo</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$139,575</td>
|
||||
<td>9383</td>
|
||||
<td>s.yamamoto@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor</td>
|
||||
<td>Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$98,540</td>
|
||||
<td>8327</td>
|
||||
<td>t.walton@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn</td>
|
||||
<td>Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$87,500</td>
|
||||
<td>2927</td>
|
||||
<td>f.camacho@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Serge</td>
|
||||
<td>Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Singapore</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$138,575</td>
|
||||
<td>8352</td>
|
||||
<td>s.baldwin@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida</td>
|
||||
<td>Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$125,250</td>
|
||||
<td>7439</td>
|
||||
<td>z.frank@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita</td>
|
||||
<td>Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$115,000</td>
|
||||
<td>4389</td>
|
||||
<td>z.serrano@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer</td>
|
||||
<td>Acosta</td>
|
||||
<td>Junior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$75,650</td>
|
||||
<td>3431</td>
|
||||
<td>j.acosta@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara</td>
|
||||
<td>Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$145,600</td>
|
||||
<td>3990</td>
|
||||
<td>c.stevens@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione</td>
|
||||
<td>Butler</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$356,250</td>
|
||||
<td>1016</td>
|
||||
<td>h.butler@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael</td>
|
||||
<td>Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$103,500</td>
|
||||
<td>6733</td>
|
||||
<td>l.greer@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas</td>
|
||||
<td>Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$86,500</td>
|
||||
<td>8196</td>
|
||||
<td>j.alexander@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad</td>
|
||||
<td>Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$183,000</td>
|
||||
<td>6373</td>
|
||||
<td>s.decker@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael</td>
|
||||
<td>Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Singapore</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$183,000</td>
|
||||
<td>5384</td>
|
||||
<td>m.bruce@datatables.net</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna</td>
|
||||
<td>Snider</td>
|
||||
<td>Customer Support</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$112,000</td>
|
||||
<td>4226</td>
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>Ajax</li>
|
||||
<li>Server-side script</li>
|
||||
</ul>
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/js/dataTables.semanticui.js">../../../../media/js/dataTables.semanticui.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/dataTables.responsive.js">../../js/dataTables.responsive.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../js/responsive.semanticui.js">../../js/responsive.semanticui.js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="table">
|
||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||
</div>
|
||||
<div class="css">
|
||||
<div>
|
||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
|
||||
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||
</div>
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../../../media/css/dataTables.semanticui.css">../../../../media/css/dataTables.semanticui.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../css/responsive.semanticui.css">../../css/responsive.semanticui.css</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ajax">
|
||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
|
||||
loaded.</p>
|
||||
</div>
|
||||
<div class="php">
|
||||
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
|
||||
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||
documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<div class="footer">
|
||||
<div class="gradient"></div>
|
||||
<div class="liner">
|
||||
<h2>Other examples</h2>
|
||||
<div class="toc">
|
||||
<div class="toc-group">
|
||||
<h3><a href="../initialisation/index.html">Basic initialisation</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../initialisation/className.html">Class name</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/option.html">Configuration option</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/new.html">`new` constructor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/ajax.html">Ajax data</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../initialisation/default.html">Default initialisation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../display-types/index.html">Display-types</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../display-types/immediateShow.html">Immediately show hidden details</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/modal.html">Modal details display</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap-modal.html">Bootstrap modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/bootstrap4-modal.html">Bootstrap 4 modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/foundation-modal.html">Foundation modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/semanticui-modal.html">Semantic UI modal</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../display-types/jqueryui-modal.html">jQuery UI modal</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../column-control/index.html">Column-control</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../column-control/auto.html">Automatic column hiding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/columnPriority.html">Column priority</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/classes.html">Class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/init-classes.html">Assigned class control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/column-visibility.html">With Buttons - Column visibility</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/fixedHeader.html">With FixedHeader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../column-control/colreorder.html">With ColReorder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="../child-rows/index.html">Child rows</a></h3>
|
||||
<ul class="toc">
|
||||
<li>
|
||||
<a href="../child-rows/disable-child-rows.html">Disable child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/column-control.html">Column controlled child rows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/right-column.html">Column control - right</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/whole-row-control.html">Whole row child row control</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../child-rows/custom-renderer.html">Custom child row renderer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="toc-group">
|
||||
<h3><a href="./index.html">Styling</a></h3>
|
||||
<ul class="toc active">
|
||||
<li>
|
||||
<a href="./bootstrap.html">Bootstrap styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./bootstrap4.html">Bootstrap 4 styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./foundation.html">Foundation styling</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="./semanticui.html">Semantic UI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./jqueryui.html">jQuery UI styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./compact.html">Compact styling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./scrolling.html">Vertical scrolling</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epilogue">
|
||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
|
||||
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
|
||||
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
26
static/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js
vendored
Normal file
26
static/plugin/datatables/extensions/Responsive/js/dataTables.responsive.min.js
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
/*!
|
||||
Responsive 2.1.0
|
||||
2014-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(l){return c(l,window,document)}):"object"===typeof exports?module.exports=function(l,k){l||(l=window);if(!k||!k.fn.dataTable)k=require("datatables.net")(l,k).$;return c(k,l,l.document)}:c(jQuery,window,document)})(function(c,l,k,p){var m=c.fn.dataTable,j=function(a,b){if(!m.versionCheck||!m.versionCheck("1.10.3"))throw"DataTables Responsive requires DataTables 1.10.3 or newer";this.s={dt:new m.Api(a),columns:[],
|
||||
current:[]};this.s.dt.settings()[0].responsive||(b&&"string"===typeof b.details?b.details={type:b.details}:b&&!1===b.details?b.details={type:!1}:b&&!0===b.details&&(b.details={type:"inline"}),this.c=c.extend(!0,{},j.defaults,m.defaults.responsive,b),a.responsive=this,this._constructor())};c.extend(j.prototype,{_constructor:function(){var a=this,b=this.s.dt,d=b.settings()[0],e=c(l).width();b.settings()[0]._responsive=this;c(l).on("resize.dtr orientationchange.dtr",m.util.throttle(function(){var b=
|
||||
c(l).width();b!==e&&(a._resize(),e=b)}));d.oApi._fnCallbackReg(d,"aoRowCreatedCallback",function(e){-1!==c.inArray(!1,a.s.current)&&c("td, th",e).each(function(e){e=b.column.index("toData",e);!1===a.s.current[e]&&c(this).css("display","none")})});b.on("destroy.dtr",function(){b.off(".dtr");c(b.table().body()).off(".dtr");c(l).off("resize.dtr orientationchange.dtr");c.each(a.s.current,function(b,e){!1===e&&a._setColumnVis(b,!0)})});this.c.breakpoints.sort(function(a,b){return a.width<b.width?1:a.width>
|
||||
b.width?-1:0});this._classLogic();this._resizeAuto();d=this.c.details;!1!==d.type&&(a._detailsInit(),b.on("column-visibility.dtr",function(){a._classLogic();a._resizeAuto();a._resize()}),b.on("draw.dtr",function(){a._redrawChildren()}),c(b.table().node()).addClass("dtr-"+d.type));b.on("column-reorder.dtr",function(){a._classLogic();a._resizeAuto();a._resize()});b.on("column-sizing.dtr",function(){a._resizeAuto();a._resize()});b.on("init.dtr",function(){a._resizeAuto();a._resize();c.inArray(false,
|
||||
a.s.current)&&b.columns.adjust()});this._resize()},_columnsVisiblity:function(a){var b=this.s.dt,d=this.s.columns,e,f,g=d.map(function(a,b){return{columnIdx:b,priority:a.priority}}).sort(function(a,b){return a.priority!==b.priority?a.priority-b.priority:a.columnIdx-b.columnIdx}),h=c.map(d,function(b){return b.auto&&null===b.minWidth?!1:!0===b.auto?"-":-1!==c.inArray(a,b.includeIn)}),n=0;e=0;for(f=h.length;e<f;e++)!0===h[e]&&(n+=d[e].minWidth);e=b.settings()[0].oScroll;e=e.sY||e.sX?e.iBarWidth:0;b=
|
||||
b.table().container().offsetWidth-e-n;e=0;for(f=h.length;e<f;e++)d[e].control&&(b-=d[e].minWidth);n=!1;e=0;for(f=g.length;e<f;e++){var i=g[e].columnIdx;"-"===h[i]&&(!d[i].control&&d[i].minWidth)&&(n||0>b-d[i].minWidth?(n=!0,h[i]=!1):h[i]=!0,b-=d[i].minWidth)}g=!1;e=0;for(f=d.length;e<f;e++)if(!d[e].control&&!d[e].never&&!h[e]){g=!0;break}e=0;for(f=d.length;e<f;e++)d[e].control&&(h[e]=g);-1===c.inArray(!0,h)&&(h[0]=!0);return h},_classLogic:function(){var a=this,b=this.c.breakpoints,d=this.s.dt,e=
|
||||
d.columns().eq(0).map(function(a){var b=this.column(a),e=b.header().className,a=d.settings()[0].aoColumns[a].responsivePriority;a===p&&(b=c(b.header()).data("priority"),a=b!==p?1*b:1E4);return{className:e,includeIn:[],auto:!1,control:!1,never:e.match(/\bnever\b/)?!0:!1,priority:a}}),f=function(a,b){var d=e[a].includeIn;-1===c.inArray(b,d)&&d.push(b)},g=function(c,d,i,g){if(i)if("max-"===i){g=a._find(d).width;d=0;for(i=b.length;d<i;d++)b[d].width<=g&&f(c,b[d].name)}else if("min-"===i){g=a._find(d).width;
|
||||
d=0;for(i=b.length;d<i;d++)b[d].width>=g&&f(c,b[d].name)}else{if("not-"===i){d=0;for(i=b.length;d<i;d++)-1===b[d].name.indexOf(g)&&f(c,b[d].name)}}else e[c].includeIn.push(d)};e.each(function(a,e){for(var d=a.className.split(" "),f=!1,j=0,l=d.length;j<l;j++){var k=c.trim(d[j]);if("all"===k){f=!0;a.includeIn=c.map(b,function(a){return a.name});return}if("none"===k||a.never){f=!0;return}if("control"===k){f=!0;a.control=!0;return}c.each(b,function(a,b){var d=b.name.split("-"),c=k.match(RegExp("(min\\-|max\\-|not\\-)?("+
|
||||
d[0]+")(\\-[_a-zA-Z0-9])?"));c&&(f=!0,c[2]===d[0]&&c[3]==="-"+d[1]?g(e,b.name,c[1],c[2]+c[3]):c[2]===d[0]&&!c[3]&&g(e,b.name,c[1],c[2]))})}f||(a.auto=!0)});this.s.columns=e},_detailsDisplay:function(a,b){var d=this,e=this.s.dt,f=this.c.details;if(f&&!1!==f.type){var g=f.display(a,b,function(){return f.renderer(e,a[0],d._detailsObj(a[0]))});(!0===g||!1===g)&&c(e.table().node()).triggerHandler("responsive-display.dt",[e,a,g,b])}},_detailsInit:function(){var a=this,b=this.s.dt,d=this.c.details;"inline"===
|
||||
d.type&&(d.target="td:first-child, th:first-child");b.on("draw.dtr",function(){a._tabIndexes()});a._tabIndexes();c(b.table().body()).on("keyup.dtr","td, th",function(a){a.keyCode===13&&c(this).data("dtr-keyboard")&&c(this).click()});var e=d.target;c(b.table().body()).on("click.dtr mousedown.dtr mouseup.dtr","string"===typeof e?e:"td, th",function(d){if(c(b.table().node()).hasClass("collapsed")&&b.row(c(this).closest("tr")).length){if(typeof e==="number"){var g=e<0?b.columns().eq(0).length+e:e;if(b.cell(this).index().column!==
|
||||
g)return}g=b.row(c(this).closest("tr"));d.type==="click"?a._detailsDisplay(g,false):d.type==="mousedown"?c(this).css("outline","none"):d.type==="mouseup"&&c(this).blur().css("outline","")}})},_detailsObj:function(a){var b=this,d=this.s.dt;return c.map(this.s.columns,function(e,c){if(!e.never&&!e.control)return{title:d.settings()[0].aoColumns[c].sTitle,data:d.cell(a,c).render(b.c.orthogonal),hidden:d.column(c).visible()&&!b.s.current[c],columnIndex:c,rowIndex:a}})},_find:function(a){for(var b=this.c.breakpoints,
|
||||
d=0,c=b.length;d<c;d++)if(b[d].name===a)return b[d]},_redrawChildren:function(){var a=this,b=this.s.dt;b.rows({page:"current"}).iterator("row",function(c,e){b.row(e);a._detailsDisplay(b.row(e),!0)})},_resize:function(){var a=this,b=this.s.dt,d=c(l).width(),e=this.c.breakpoints,f=e[0].name,g=this.s.columns,h,j=this.s.current.slice();for(h=e.length-1;0<=h;h--)if(d<=e[h].width){f=e[h].name;break}var i=this._columnsVisiblity(f);this.s.current=i;e=!1;h=0;for(d=g.length;h<d;h++)if(!1===i[h]&&!g[h].never&&
|
||||
!g[h].control){e=!0;break}c(b.table().node()).toggleClass("collapsed",e);var k=!1;b.columns().eq(0).each(function(b,c){i[c]!==j[c]&&(k=!0,a._setColumnVis(b,i[c]))});k&&(this._redrawChildren(),c(b.table().node()).trigger("responsive-resize.dt",[b,this.s.current]))},_resizeAuto:function(){var a=this.s.dt,b=this.s.columns;if(this.c.auto&&-1!==c.inArray(!0,c.map(b,function(a){return a.auto}))){a.table().node();var d=a.table().node().cloneNode(!1),e=c(a.table().header().cloneNode(!1)).appendTo(d),f=c(a.table().body()).clone(!1,
|
||||
!1).empty().appendTo(d),g=a.columns().header().filter(function(b){return a.column(b).visible()}).to$().clone(!1).css("display","table-cell");c(f).append(c(a.rows({page:"current"}).nodes()).clone(!1)).find("th, td").css("display","");if(f=a.table().footer()){var f=c(f.cloneNode(!1)).appendTo(d),h=a.columns().footer().filter(function(b){return a.column(b).visible()}).to$().clone(!1).css("display","table-cell");c("<tr/>").append(h).appendTo(f)}c("<tr/>").append(g).appendTo(e);"inline"===this.c.details.type&&
|
||||
c(d).addClass("dtr-inline collapsed");c(d).find("[name]").removeAttr("name");d=c("<div/>").css({width:1,height:1,overflow:"hidden"}).append(d);d.insertBefore(a.table().node());g.each(function(c){c=a.column.index("fromVisible",c);b[c].minWidth=this.offsetWidth||0});d.remove()}},_setColumnVis:function(a,b){var d=this.s.dt,e=b?"":"none";c(d.column(a).header()).css("display",e);c(d.column(a).footer()).css("display",e);d.column(a).nodes().to$().css("display",e)},_tabIndexes:function(){var a=this.s.dt,
|
||||
b=a.cells({page:"current"}).nodes().to$(),d=a.settings()[0],e=this.c.details.target;b.filter("[data-dtr-keyboard]").removeData("[data-dtr-keyboard]");c("number"===typeof e?":eq("+e+")":e,a.rows({page:"current"}).nodes()).attr("tabIndex",d.iTabIndex).data("dtr-keyboard",1)}});j.breakpoints=[{name:"desktop",width:Infinity},{name:"tablet-l",width:1024},{name:"tablet-p",width:768},{name:"mobile-l",width:480},{name:"mobile-p",width:320}];j.display={childRow:function(a,b,d){if(b){if(c(a.node()).hasClass("parent"))return a.child(d(),
|
||||
"child").show(),!0}else{if(a.child.isShown())return a.child(!1),c(a.node()).removeClass("parent"),!1;a.child(d(),"child").show();c(a.node()).addClass("parent");return!0}},childRowImmediate:function(a,b,d){if(!b&&a.child.isShown()||!a.responsive.hasHidden())return a.child(!1),c(a.node()).removeClass("parent"),!1;a.child(d(),"child").show();c(a.node()).addClass("parent");return!0},modal:function(a){return function(b,d,e){if(d)c("div.dtr-modal-content").empty().append(e());else{var f=function(){g.remove();
|
||||
c(k).off("keypress.dtr")},g=c('<div class="dtr-modal"/>').append(c('<div class="dtr-modal-display"/>').append(c('<div class="dtr-modal-content"/>').append(e())).append(c('<div class="dtr-modal-close">×</div>').click(function(){f()}))).append(c('<div class="dtr-modal-background"/>').click(function(){f()})).appendTo("body");c(k).on("keyup.dtr",function(a){27===a.keyCode&&(a.stopPropagation(),f())})}a&&a.header&&c("div.dtr-modal-content").prepend("<h2>"+a.header(b)+"</h2>")}}};j.renderer={listHidden:function(){return function(a,
|
||||
b,d){return(a=c.map(d,function(a){return a.hidden?'<li data-dtr-index="'+a.columnIndex+'" data-dt-row="'+a.rowIndex+'" data-dt-column="'+a.columnIndex+'"><span class="dtr-title">'+a.title+'</span> <span class="dtr-data">'+a.data+"</span></li>":""}).join(""))?c('<ul data-dtr-index="'+b+'"/>').append(a):!1}},tableAll:function(a){a=c.extend({tableClass:""},a);return function(b,d,e){b=c.map(e,function(a){return'<tr data-dt-row="'+a.rowIndex+'" data-dt-column="'+a.columnIndex+'"><td>'+a.title+":</td> <td>"+
|
||||
a.data+"</td></tr>"}).join("");return c('<table class="'+a.tableClass+'" width="100%"/>').append(b)}}};j.defaults={breakpoints:j.breakpoints,auto:!0,details:{display:j.display.childRow,renderer:j.renderer.listHidden(),target:0,type:"inline"},orthogonal:"display"};var o=c.fn.dataTable.Api;o.register("responsive()",function(){return this});o.register("responsive.index()",function(a){a=c(a);return{column:a.data("dtr-index"),row:a.parent().data("dtr-index")}});o.register("responsive.rebuild()",function(){return this.iterator("table",
|
||||
function(a){a._responsive&&a._responsive._classLogic()})});o.register("responsive.recalc()",function(){return this.iterator("table",function(a){a._responsive&&(a._responsive._resizeAuto(),a._responsive._resize())})});o.register("responsive.hasHidden()",function(){var a=this.context[0];return a._responsive?-1!==c.inArray(!1,a._responsive.s.current):!1});j.version="2.1.0";c.fn.dataTable.Responsive=j;c.fn.DataTable.Responsive=j;c(k).on("preInit.dt.dtr",function(a,b){if("dt"===a.namespace&&(c(b.nTable).hasClass("responsive")||
|
||||
c(b.nTable).hasClass("dt-responsive")||b.oInit.responsive||m.defaults.responsive)){var d=b.oInit.responsive;!1!==d&&new j(b,c.isPlainObject(d)?d:{})}});return j});
|
||||
@ -0,0 +1,81 @@
|
||||
/*! Bootstrap integration for DataTables' Responsive
|
||||
* ©2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bs', 'datatables.net-responsive'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net-bs')(root, $).$;
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Responsive ) {
|
||||
require('datatables.net-responsive')(root, $);
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var _display = DataTable.Responsive.display;
|
||||
var _original = _display.modal;
|
||||
var _modal = $(
|
||||
'<div class="modal fade dtr-bs-modal" role="dialog">'+
|
||||
'<div class="modal-dialog" role="document">'+
|
||||
'<div class="modal-content">'+
|
||||
'<div class="modal-header">'+
|
||||
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'+
|
||||
'</div>'+
|
||||
'<div class="modal-body"/>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>'
|
||||
);
|
||||
|
||||
_display.modal = function ( options ) {
|
||||
return function ( row, update, render ) {
|
||||
if ( ! $.fn.modal ) {
|
||||
_original( row, update, render );
|
||||
}
|
||||
else {
|
||||
if ( ! update ) {
|
||||
if ( options && options.header ) {
|
||||
_modal.find('div.modal-header')
|
||||
.empty()
|
||||
.append( '<h4 class="modal-title">'+options.header( row )+'</h4>' );
|
||||
}
|
||||
|
||||
_modal.find( 'div.modal-body' )
|
||||
.empty()
|
||||
.append( render() );
|
||||
|
||||
_modal
|
||||
.appendTo( 'body' )
|
||||
.modal();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return DataTable.Responsive;
|
||||
}));
|
||||
6
static/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js
vendored
Normal file
6
static/plugin/datatables/extensions/Responsive/js/responsive.bootstrap.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
Bootstrap integration for DataTables' Responsive
|
||||
©2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-bs")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,g=b.modal,d=c('<div class="modal fade dtr-bs-modal" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"/></div></div></div>');
|
||||
b.modal=function(a){return function(b,e,f){c.fn.modal?e||(a&&a.header&&d.find("div.modal-header").empty().append('<h4 class="modal-title">'+a.header(b)+"</h4>"),d.find("div.modal-body").empty().append(f()),d.appendTo("body").modal()):g(b,e,f)}};return a.Responsive});
|
||||
@ -0,0 +1,81 @@
|
||||
/*! Bootstrap 4 integration for DataTables' Responsive
|
||||
* ©2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-bs4', 'datatables.net-responsive'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net-bs4')(root, $).$;
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Responsive ) {
|
||||
require('datatables.net-responsive')(root, $);
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var _display = DataTable.Responsive.display;
|
||||
var _original = _display.modal;
|
||||
var _modal = $(
|
||||
'<div class="modal fade dtr-bs-modal" role="dialog">'+
|
||||
'<div class="modal-dialog" role="document">'+
|
||||
'<div class="modal-content">'+
|
||||
'<div class="modal-header">'+
|
||||
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'+
|
||||
'</div>'+
|
||||
'<div class="modal-body"/>'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>'
|
||||
);
|
||||
|
||||
_display.modal = function ( options ) {
|
||||
return function ( row, update, render ) {
|
||||
if ( ! $.fn.modal ) {
|
||||
_original( row, update, render );
|
||||
}
|
||||
else {
|
||||
if ( ! update ) {
|
||||
if ( options && options.header ) {
|
||||
_modal.find('div.modal-header')
|
||||
.empty()
|
||||
.append( '<h4 class="modal-title">'+options.header( row )+'</h4>' );
|
||||
}
|
||||
|
||||
_modal.find( 'div.modal-body' )
|
||||
.empty()
|
||||
.append( render() );
|
||||
|
||||
_modal
|
||||
.appendTo( 'body' )
|
||||
.modal();
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return DataTable.Responsive;
|
||||
}));
|
||||
6
static/plugin/datatables/extensions/Responsive/js/responsive.bootstrap4.min.js
vendored
Normal file
6
static/plugin/datatables/extensions/Responsive/js/responsive.bootstrap4.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
Bootstrap 4 integration for DataTables' Responsive
|
||||
©2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs4","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-bs4")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,g=b.modal,d=c('<div class="modal fade dtr-bs-modal" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"/></div></div></div>');
|
||||
b.modal=function(a){return function(b,e,f){c.fn.modal?e||(a&&a.header&&d.find("div.modal-header").empty().append('<h4 class="modal-title">'+a.header(b)+"</h4>"),d.find("div.modal-body").empty().append(f()),d.appendTo("body").modal()):g(b,e,f)}};return a.Responsive});
|
||||
@ -0,0 +1,62 @@
|
||||
/*! Foundation integration for DataTables' Responsive
|
||||
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-zf', 'datatables.net-responsive'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net-zf')(root, $).$;
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Responsive ) {
|
||||
require('datatables.net-responsive')(root, $);
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var _display = DataTable.Responsive.display;
|
||||
var _original = _display.modal;
|
||||
|
||||
_display.modal = function ( options ) {
|
||||
return function ( row, update, render ) {
|
||||
if ( ! $.fn.foundation ) {
|
||||
_original( row, update, render );
|
||||
}
|
||||
else {
|
||||
if ( ! update ) {
|
||||
$( '<div class="reveal-modal" data-reveal/>' )
|
||||
.append( '<a class="close-reveal-modal" aria-label="Close">×</a>' )
|
||||
.append( options && options.header ? '<h4>'+options.header( row )+'</h4>' : null )
|
||||
.append( render() )
|
||||
.appendTo( 'body' )
|
||||
.foundation( 'reveal', 'open' );
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return DataTable.Responsive;
|
||||
}));
|
||||
6
static/plugin/datatables/extensions/Responsive/js/responsive.foundation.min.js
vendored
Normal file
6
static/plugin/datatables/extensions/Responsive/js/responsive.foundation.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
Foundation integration for DataTables' Responsive
|
||||
©2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-zf","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-zf")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,f=b.modal;b.modal=function(a){return function(b,
|
||||
d,e){c.fn.foundation?d||c('<div class="reveal-modal" data-reveal/>').append('<a class="close-reveal-modal" aria-label="Close">×</a>').append(a&&a.header?"<h4>"+a.header(b)+"</h4>":null).append(e()).appendTo("body").foundation("reveal","open"):f(b,d,e)}};return a.Responsive});
|
||||
@ -0,0 +1,63 @@
|
||||
/*! jQuery UI integration for DataTables' Responsive
|
||||
* ©2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-jqui', 'datatables.net-responsive'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net-jqui')(root, $).$;
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Responsive ) {
|
||||
require('datatables.net-responsive')(root, $);
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var _display = DataTable.Responsive.display;
|
||||
var _original = _display.modal;
|
||||
|
||||
_display.modal = function ( options ) {
|
||||
return function ( row, update, render ) {
|
||||
if ( ! $.fn.dialog ) {
|
||||
_original( row, update, render );
|
||||
}
|
||||
else {
|
||||
if ( ! update ) {
|
||||
$( '<div/>' )
|
||||
.append( render() )
|
||||
.appendTo( 'body' )
|
||||
.dialog( $.extend( true, {
|
||||
title: options && options.header ? options.header( row ) : '',
|
||||
width: 500
|
||||
}, options.dialog ) );
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return DataTable.Responsive;
|
||||
}));
|
||||
6
static/plugin/datatables/extensions/Responsive/js/responsive.jqueryui.min.js
vendored
Normal file
6
static/plugin/datatables/extensions/Responsive/js/responsive.jqueryui.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
jQuery UI integration for DataTables' Responsive
|
||||
©2015 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-jqui","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-jqui")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,f=b.modal;b.modal=function(a){return function(b,
|
||||
d,e){c.fn.dialog?d||c("<div/>").append(e()).appendTo("body").dialog(c.extend(!0,{title:a&&a.header?a.header(b):"",width:500},a.dialog)):f(b,d,e)}};return a.Responsive});
|
||||
@ -0,0 +1,77 @@
|
||||
/*! Bootstrap integration for DataTables' Responsive
|
||||
* ©2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
|
||||
(function( factory ){
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( ['jquery', 'datatables.net-se', 'datatables.net-responsive'], function ( $ ) {
|
||||
return factory( $, window, document );
|
||||
} );
|
||||
}
|
||||
else if ( typeof exports === 'object' ) {
|
||||
// CommonJS
|
||||
module.exports = function (root, $) {
|
||||
if ( ! root ) {
|
||||
root = window;
|
||||
}
|
||||
|
||||
if ( ! $ || ! $.fn.dataTable ) {
|
||||
$ = require('datatables.net-se')(root, $).$;
|
||||
}
|
||||
|
||||
if ( ! $.fn.dataTable.Responsive ) {
|
||||
require('datatables.net-responsive')(root, $);
|
||||
}
|
||||
|
||||
return factory( $, root, root.document );
|
||||
};
|
||||
}
|
||||
else {
|
||||
// Browser
|
||||
factory( jQuery, window, document );
|
||||
}
|
||||
}(function( $, window, document, undefined ) {
|
||||
'use strict';
|
||||
var DataTable = $.fn.dataTable;
|
||||
|
||||
|
||||
var _display = DataTable.Responsive.display;
|
||||
var _original = _display.modal;
|
||||
var _modal = $(
|
||||
'<div class="ui modal" role="dialog">'+
|
||||
'<div class="header">'+
|
||||
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'+
|
||||
'</div>'+
|
||||
'<div class="content"/>'+
|
||||
'</div>'
|
||||
);
|
||||
|
||||
_display.modal = function ( options ) {
|
||||
return function ( row, update, render ) {
|
||||
if ( ! $.fn.modal ) {
|
||||
_original( row, update, render );
|
||||
}
|
||||
else {
|
||||
if ( ! update ) {
|
||||
if ( options && options.header ) {
|
||||
_modal.find('div.header')
|
||||
.empty()
|
||||
.append( '<h4 class="title">'+options.header( row )+'</h4>' );
|
||||
}
|
||||
|
||||
_modal.find( 'div.content' )
|
||||
.empty()
|
||||
.append( render() );
|
||||
|
||||
_modal
|
||||
.appendTo( 'body' )
|
||||
.modal('show');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
return DataTable.Responsive;
|
||||
}));
|
||||
6
static/plugin/datatables/extensions/Responsive/js/responsive.semanticui.min.js
vendored
Normal file
6
static/plugin/datatables/extensions/Responsive/js/responsive.semanticui.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*!
|
||||
Bootstrap integration for DataTables' Responsive
|
||||
©2015-2016 SpryMedia Ltd - datatables.net/license
|
||||
*/
|
||||
(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-se","datatables.net-responsive"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net-se")(a,b).$;b.fn.dataTable.Responsive||require("datatables.net-responsive")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c){var a=c.fn.dataTable,b=a.Responsive.display,g=b.modal,d=c('<div class="ui modal" role="dialog"><div class="header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="content"/></div>');
|
||||
b.modal=function(a){return function(b,e,f){c.fn.modal?e||(a&&a.header&&d.find("div.header").empty().append('<h4 class="title">'+a.header(b)+"</h4>"),d.find("div.content").empty().append(f()),d.appendTo("body").modal("show")):g(b,e,f)}};return a.Responsive});
|
||||
Reference in New Issue
Block a user