mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 15:01:39 +08:00
添加Metronic（作为LFS）
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
# TableTools
|
||||
|
||||
TableTools is a plug-in for the DataTables HTML table enhancer, which adds a highly customisable button toolbar to a DataTable. Key features include:
|
||||
|
||||
* Copy to clipboard
|
||||
* Save table data as CSV, XLS or PDF files
|
||||
* Print view for clean printing
|
||||
* Row selection options
|
||||
* Easy use predefined buttons
|
||||
* Simple customisation of buttons
|
||||
* Well defined API for advanced control
|
||||
|
||||
|
||||
# Installation
|
||||
|
||||
To use TableTools, first download DataTables ( http://datatables.net/download ) and place the unzipped TableTools package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
|
||||
|
||||
|
||||
# Basic usage
|
||||
|
||||
TableTools is initialised using the `T` option that it adds to DataTables' `dom` option. For example:
|
||||
|
||||
```js
|
||||
$(document).ready( function () {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
```
|
||||
|
||||
|
||||
# Documentation / support
|
||||
|
||||
* Documentation: http://datatables.net/extensions/TableTools/
|
||||
* DataTables support forums: http://datatables.net/forums
|
||||
|
||||
|
||||
# GitHub
|
||||
|
||||
If you fancy getting involved with the development of TableTools and help make it better, please refer to its GitHub repo: https://github.com/DataTables/TableTools
|
||||
|
||||
@@ -0,0 +1,321 @@
|
||||
/*
|
||||
* File: TableTools.css
|
||||
* Description: Styles for TableTools 2
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
* Language: Javascript
|
||||
* License: GPL v2 / 3 point BSD
|
||||
* Project: DataTables
|
||||
*
|
||||
* Copyright 2009-2012 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
*
|
||||
* CSS name space:
|
||||
* DTTT DataTables TableTools
|
||||
*
|
||||
* Style sheet provides:
|
||||
* CONTAINER TableTools container element and styles applying to all components
|
||||
* BUTTON_STYLES Action specific button styles
|
||||
* SELECTING Row selection styles
|
||||
* COLLECTIONS Drop down list (collection) styles
|
||||
* PRINTING Print display styles
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* CONTAINER
|
||||
* TableTools container element and styles applying to all components
|
||||
*/
|
||||
div.DTTT_container {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
button.DTTT_button,
|
||||
div.DTTT_button,
|
||||
a.DTTT_button {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #999;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
font-size: 0.88em;
|
||||
color: black !important;
|
||||
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-ms-border-radius: 2px;
|
||||
-o-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
-webkit-box-shadow: 1px 1px 3px #ccc;
|
||||
-moz-box-shadow: 1px 1px 3px #ccc;
|
||||
-ms-box-shadow: 1px 1px 3px #ccc;
|
||||
-o-box-shadow: 1px 1px 3px #ccc;
|
||||
box-shadow: 1px 1px 3px #ccc;
|
||||
|
||||
/* Generated by http://www.colorzilla.com/gradient-editor/ */
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
|
||||
/* Buttons are cunning border-box sizing - we can't just use that for A and DIV due to IE6/7 */
|
||||
button.DTTT_button {
|
||||
height: 30px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.DTTT_button embed {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.DTTT_button:hover,
|
||||
div.DTTT_button:hover,
|
||||
a.DTTT_button:hover {
|
||||
border: 1px solid #666;
|
||||
text-decoration: none !important;
|
||||
|
||||
-webkit-box-shadow: 1px 1px 3px #999;
|
||||
-moz-box-shadow: 1px 1px 3px #999;
|
||||
-ms-box-shadow: 1px 1px 3px #999;
|
||||
-o-box-shadow: 1px 1px 3px #999;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
|
||||
background: #f3f3f3; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
button.DTTT_disabled,
|
||||
div.DTTT_disabled,
|
||||
a.DTTT_disabled {
|
||||
color: #999;
|
||||
border: 1px solid #d0d0d0;
|
||||
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* BUTTON_STYLES
|
||||
* Action specific button styles
|
||||
* If you want images - comment this back in
|
||||
|
||||
a.DTTT_button_csv,
|
||||
a.DTTT_button_xls,
|
||||
a.DTTT_button_copy,
|
||||
a.DTTT_button_pdf,
|
||||
a.DTTT_button_print {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
a.DTTT_button_csv span,
|
||||
a.DTTT_button_xls span,
|
||||
a.DTTT_button_copy span,
|
||||
a.DTTT_button_pdf span,
|
||||
a.DTTT_button_print span {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
a.DTTT_button_csv span { background: url(../images/csv.png) no-repeat bottom right; }
|
||||
a.DTTT_button_csv:hover span { background: url(../images/csv_hover.png) no-repeat center right; }
|
||||
|
||||
a.DTTT_button_xls span { background: url(../images/xls.png) no-repeat center right; }
|
||||
a.DTTT_button_xls:hover span { background: #f0f0f0 url(../images/xls_hover.png) no-repeat center right; }
|
||||
|
||||
a.DTTT_button_copy span { background: url(../images/copy.png) no-repeat center right; }
|
||||
a.DTTT_button_copy:hover span { background: #f0f0f0 url(../images/copy_hover.png) no-repeat center right; }
|
||||
|
||||
a.DTTT_button_pdf span { background: url(../images/pdf.png) no-repeat center right; }
|
||||
a.DTTT_button_pdf:hover span { background: #f0f0f0 url(../images/pdf_hover.png) no-repeat center right; }
|
||||
|
||||
a.DTTT_button_print span { background: url(../images/print.png) no-repeat center right; }
|
||||
a.DTTT_button_print:hover span { background: #f0f0f0 url(../images/print_hover.png) no-repeat center right; }
|
||||
|
||||
*/
|
||||
|
||||
button.DTTT_button_collection span {
|
||||
padding-right: 17px;
|
||||
background: url(../images/collection.png) no-repeat center right;
|
||||
}
|
||||
|
||||
button.DTTT_button_collection:hover span {
|
||||
padding-right: 17px;
|
||||
background: #f0f0f0 url(../images/collection_hover.png) no-repeat center right;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* SELECTING
|
||||
* Row selection styles
|
||||
*/
|
||||
table.DTTT_selectable tbody tr {
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.odd {
|
||||
background-color: #9FAFD1;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.odd td.sorting_1 {
|
||||
background-color: #9FAFD1;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.odd td.sorting_2 {
|
||||
background-color: #9FAFD1;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.odd td.sorting_3 {
|
||||
background-color: #9FAFD1;
|
||||
}
|
||||
|
||||
|
||||
table.dataTable tr.DTTT_selected.even {
|
||||
background-color: #B0BED9;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.even td.sorting_1 {
|
||||
background-color: #B0BED9;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.even td.sorting_2 {
|
||||
background-color: #B0BED9;
|
||||
}
|
||||
|
||||
table.dataTable tr.DTTT_selected.even td.sorting_3 {
|
||||
background-color: #B0BED9;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* COLLECTIONS
|
||||
* Drop down list (collection) styles
|
||||
*/
|
||||
|
||||
div.DTTT_collection {
|
||||
width: 150px;
|
||||
padding: 8px 8px 4px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.4 );
|
||||
background-color: #f3f3f3;
|
||||
background-color: rgba( 255, 255, 255, 0.3 );
|
||||
overflow: hidden;
|
||||
z-index: 2002;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||
-ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
div.DTTT_collection_background {
|
||||
background: transparent url(../images/background.png) repeat top left;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
div.DTTT_collection button.DTTT_button,
|
||||
div.DTTT_collection div.DTTT_button,
|
||||
div.DTTT_collection a.DTTT_button {
|
||||
position: relative;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
display: block;
|
||||
float: none;
|
||||
margin-bottom: 4px;
|
||||
|
||||
-webkit-box-shadow: 1px 1px 3px #999;
|
||||
-moz-box-shadow: 1px 1px 3px #999;
|
||||
-ms-box-shadow: 1px 1px 3px #999;
|
||||
-o-box-shadow: 1px 1px 3px #999;
|
||||
box-shadow: 1px 1px 3px #999;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* PRINTING
|
||||
* Print display styles
|
||||
*/
|
||||
|
||||
.DTTT_print_info {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
margin-left: -200px;
|
||||
margin-top: -75px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
padding: 10px 30px;
|
||||
|
||||
background: #ffffff; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
|
||||
|
||||
opacity: 0.95;
|
||||
|
||||
border: 1px solid black;
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
-ms-border-radius: 6px;
|
||||
-o-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
|
||||
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
-o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.DTTT_print_info h6 {
|
||||
font-weight: normal;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.DTTT_print_info p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,646 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Button arrangement</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Button arrangement</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools makes it very simple to arrange the buttons in the toolbar as you see fit. Using the
|
||||
<code>aButtons</code> parameter you can use any of the <a href=
|
||||
"http://datatables.net/extensions/tabletools/buttons">predefined buttons</a> or <a href=
|
||||
"http://datatables.net/extensions/tabletools/button_options">customised buttons</a>. The example below
|
||||
shows how TableTools can be initialised to provide only the 'copy-to-clipboard' and 'print view'
|
||||
options (i.e. no save to local file option is available).</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li class="active"><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,658 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Bootstrap styling</title>
|
||||
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/bootstrap/3/dataTables.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">
|
||||
|
||||
body { font-size: 140%; }
|
||||
div.DTTT { margin-bottom: 0.5em; float: right; }
|
||||
div.dataTables_wrapper { clear: both; }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.js"></script>
|
||||
<script type="text/javascript" language="javascript" src=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.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() {
|
||||
var table = $('#example').DataTable();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Bootstrap styling</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a> is a very powerful design
|
||||
framework for allowing you to very quickly create applications with a unified look and feel. <a href=
|
||||
"http://datatables.net/manual/styling/bootstrap">DataTables integrates well</a> with Bootstrap, and so
|
||||
does TableTools.</p>
|
||||
|
||||
<p>This example shows the default Bootstrap theme being used with a Bootstrap styled DataTable. The
|
||||
<a href="new_init.html"><code>new</code></a> form of initialising TableTools is used here, as the
|
||||
Bootstrap integration uses a complex <a href="//datatables.net/reference/option/dom"><code class=
|
||||
"option" title="Initialisation option">dom</code></a> option (it is possible to provide a custom
|
||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> option if you want to, this is just for simplicity!).</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.js</a></li>
|
||||
<li><a href=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.bootstrap.js">../../../examples/resources/bootstrap/3/dataTables.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 brush: js;">body { font-size: 140%; }
|
||||
div.DTTT { margin-bottom: 0.5em; float: right; }
|
||||
div.dataTables_wrapper { clear: both; }</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=
|
||||
"//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css</a></li>
|
||||
<li><a href=
|
||||
"../../../examples/resources/bootstrap/3/dataTables.bootstrap.css">../../../examples/resources/bootstrap/3/dataTables.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="./index.html">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li class="active"><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,679 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Custom button text</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"oSelectorOpts": {
|
||||
page: 'current'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Custom button text</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>You may wish to set your own text for the buttons in the TableTools toolbar, rather than relying on
|
||||
the default built-in text. This is done by overriding the <code>sButtonText</code> parameter of
|
||||
whatever button you wish to alter. The way TableTools allows you to alter a predefined button is by
|
||||
'extending' it (using the <code>sExtends</code> parameter) and then setting the overriding
|
||||
parameter.</p>
|
||||
|
||||
<p>A full list of the parameters which can be used is <a href=
|
||||
"http://datatables.net/extensions/tabletools/button_options">available on the DataTables.net
|
||||
web-site</a>. This example shows how to set the button text as required.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"dom": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"oSelectorOpts": {
|
||||
page: 'current'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li class="active"><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,663 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Button collections</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Button collections</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools provides the ability to group buttons into a hidden drop down list, which is activated by
|
||||
clicking on a top-level button. This is achieved by extending the 'collection' predefined button type
|
||||
and setting it's <code>aButtons</code> parameter with the same options as the top level buttons (note
|
||||
that you cannot currently use a collection within a collection).</p>
|
||||
|
||||
<p>The example below shows the file save buttons grouped into a collection, while the copy and print
|
||||
buttons are left on the top level.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
"dom": 'T<"clear">lfrtip',
|
||||
"tableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li class="active"><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,642 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Defaults</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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">
|
||||
|
||||
|
||||
$.fn.dataTable.TableTools.defaults.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Defaults</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools provides the ability to override the default initialisation parameters that are used when
|
||||
creating a new instance. This this particularly useful if you have multiple tables which you want to
|
||||
have the same TableTools behaviour - rather than declaring the structure multiple times, you can just
|
||||
set the defaults once. This example shows how to alter the default buttons.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$.fn.dataTable.TableTools.defaults.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li class="active"><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<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="../../../media/js/jquery.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>
|
||||
|
||||
<title>TableTools examples - TableTools examples</title>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- TableTools examples</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools is a plug-in for the DataTables HTML table enhancer, which adds a highly customisable
|
||||
button toolbar to a DataTable. Key features include:</p>
|
||||
|
||||
<ul>
|
||||
<li>Copy to clipboard</li>
|
||||
<li>Save table data as CSV, XLS or PDF files</li>
|
||||
<li>Print view for clean printing</li>
|
||||
<li>Row selection options</li>
|
||||
<li>Easy use predefined buttons</li>
|
||||
<li>Simple customisation of buttons</li>
|
||||
<li>Well defined API for advanced control</li>
|
||||
</ul>
|
||||
</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">Examples</a></h3>
|
||||
<ul class="toc">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,647 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Multiple toolbars</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip<"clear spacer">T',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Multiple toolbars</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Like all DataTables control elements, TableTools can have multiple instances specified in the
|
||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter of DataTables. This will create two TableTools
|
||||
toolbars next to the table, providing the same functions.</p>
|
||||
|
||||
<p>An example of when this might be useful is to show the toolbar both above and below the table - as
|
||||
is done in this example.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip<"clear spacer">T',
|
||||
tableTools: {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li class="active"><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,428 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Multiple tables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Multiple tables</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how multiple tables can be initialised with DataTables and TableTools in a single
|
||||
call to the <code>$().DataTable()</code> function. Basically it works as you would expect - no special
|
||||
considerations need be made!</p>
|
||||
</div>
|
||||
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li class="active"><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,644 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Initialisation with `new`</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertAfter('div.info');
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Initialisation with `new`</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Typically when working with TableTools, the initialisation and insertion into the DOM will be done
|
||||
automatically by DataTables, through the use of the <a href=
|
||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter. However, it is also possible to initialise TableTools
|
||||
manually as shown in the example below using <code>new $.fn.dataTable.TableTools();</code>.</p>
|
||||
|
||||
<p>Once initialised you can insert the TableTools tool bar node anywhere you wish into the DOM using
|
||||
the <code>fnContainer()</code> API method to get the node.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var tt = new $.fn.dataTable.TableTools( table );
|
||||
|
||||
$( tt.fnContainer() ).insertAfter('div.info');
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li class="active"><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,663 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - PDF message</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
},
|
||||
"print"
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- PDF message</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how you can add a message to the saved PDF using the <code>sPdfMessage</code>
|
||||
parameter. It also shows that the orientation of the output PDF can be changed to landscape which is
|
||||
useful if you have a lot of columns.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
},
|
||||
"print"
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li class="active"><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,684 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Plug-in button types</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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">
|
||||
|
||||
|
||||
|
||||
$.fn.dataTable.TableTools.buttons.copy_to_div = $.extend(
|
||||
true,
|
||||
$.fn.dataTable.TableTools.buttonBase,
|
||||
{
|
||||
"sNewLine": "<br>",
|
||||
"sButtonText": "Copy to element",
|
||||
"sDiv": "",
|
||||
"fnClick": function( nButton, oConfig ) {
|
||||
document.getElementById(oConfig.sDiv).innerHTML =
|
||||
this.fnGetTableData(oConfig);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ {
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy"
|
||||
} ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Plug-in button types</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows how you can add a message to the saved PDF using the <code>sPdfMessage</code>
|
||||
parameter. It also shows that the orientation of the output PDF can be changed to landscape which is
|
||||
useful if you have a lot of columns.</p>
|
||||
</div>
|
||||
|
||||
<div id="copy" class="box" style="height: 100px; overflow: auto">
|
||||
Copy output will go here
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$.fn.dataTable.TableTools.buttons.copy_to_div = $.extend(
|
||||
true,
|
||||
$.fn.dataTable.TableTools.buttonBase,
|
||||
{
|
||||
"sNewLine": "<br>",
|
||||
"sButtonText": "Copy to element",
|
||||
"sDiv": "",
|
||||
"fnClick": function( nButton, oConfig ) {
|
||||
document.getElementById(oConfig.sDiv).innerHTML =
|
||||
this.fnGetTableData(oConfig);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"aButtons": [ {
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy"
|
||||
} ]
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li class="active"><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,657 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - multi-row select</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - multi-row select</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>multi</code> select option. There are also a number of <a href=
|
||||
"http://datatables.net/extras/tabletools/buttons">pre-defined buttons</a> to provide functions such as
|
||||
select-all and select-none, as shown in this example.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li class="active"><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,658 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - operating system style</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "os",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - operating system style</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>os</code> select option. Without keyboard interaction a single row can
|
||||
be selected at a time, but multiple rows can be selected in a range using the shift key, while rows can
|
||||
be added and removed from the selection using the ctrl / cmd key.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "os",
|
||||
"aButtons": [ "select_all", "select_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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li class="active"><a href="./select_os.html">Row selection - operating system
|
||||
style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,654 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Row selection - single row select</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Row selection - single row select</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows
|
||||
in the table. TableTools has four row selection modes of operation:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>none</code> - Default, where no user row selection options are available</li>
|
||||
<li><code>single</code> - A single row can be selected</li>
|
||||
<li><code>multi</code> - Multiple rows can be selected simply by clicking on the rows</li>
|
||||
<li><code>os</code> - Operating System like selection where you can use the shift and ctrl / cmd
|
||||
keys on your keyboard to add / remove rows from the selection.</li>
|
||||
</ul>
|
||||
|
||||
<p>This example shows the <code>single</code> select option.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li class="active"><a href="./select_single.html">Row selection - single row
|
||||
select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,642 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Basic initialisation</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Basic initialisation</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>This example shows the basic initialisation of TableTools by simply including the <code class=
|
||||
"string" title="String">T</code> option in DataTables' <a href=
|
||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"Initialisation option">dom</code></a> parameter. This tell DataTables to insert the TableTools toolbar
|
||||
in that location. Remember to include the Javascript and CSS source files as well!</p>
|
||||
|
||||
<p>It is worth noting that you might need to <a href="swf_path.html">set the <code>sSwfPath</code>
|
||||
parameter</a> to tell TableTools where to find the SWF file for copy and file save.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li class="active"><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<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,648 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
|
||||
<title>TableTools example - Setting the SWF path</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/dataTables.tableTools.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="../../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../js/dataTables.tableTools.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: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>TableTools example <span>- Setting the SWF path</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>TableTools uses a Flash SWF file to provide the ability to copy text to the system clipboard and
|
||||
save files locally. TableTools must be able to load the SWF file in order to provide these facilities.
|
||||
If you aren't using the same directory structure as the TableTools package, you will need to set the
|
||||
<code>sSwfPath</code> TableTools parameter, as shown in this example.</p>
|
||||
|
||||
<p>Note that TableTools ships with two different SWF files - the only difference between them is that
|
||||
one of them provides the ability to save PDF files while the other doesn't. The trade off is that the
|
||||
PDF capable file is significantly larger in size (56K v 2K).</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenna Elliott</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Caesar Vance</td>
|
||||
<td>Technical Author</td>
|
||||
<td>New York</td>
|
||||
<td>21</td>
|
||||
<td>2011/12/12</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Angelica Ramos</td>
|
||||
<td>System Architect</td>
|
||||
<td>London</td>
|
||||
<td>36</td>
|
||||
<td>2009/10/09</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Joyce</td>
|
||||
<td>Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>42</td>
|
||||
<td>2010/12/22</td>
|
||||
<td>$4,525</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Chang</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>28</td>
|
||||
<td>2010/11/14</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brenden Wagner</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>18</td>
|
||||
<td>2011/06/07</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ebony Grimes</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>48</td>
|
||||
<td>2010/03/11</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Russell Chavez</td>
|
||||
<td>Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>20</td>
|
||||
<td>2011/08/14</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Suki Burks</td>
|
||||
<td>Developer</td>
|
||||
<td>London</td>
|
||||
<td>53</td>
|
||||
<td>2009/10/22</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Prescott Bartlett</td>
|
||||
<td>Technical Author</td>
|
||||
<td>London</td>
|
||||
<td>27</td>
|
||||
<td>2011/05/07</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gavin Cortez</td>
|
||||
<td>Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>22</td>
|
||||
<td>2008/10/26</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martena Mccray</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>46</td>
|
||||
<td>2011/03/09</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unity Butler</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/12/09</td>
|
||||
<td>$3,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Howard Hatfield</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>51</td>
|
||||
<td>2008/12/16</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hope Fuentes</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>San Francisco</td>
|
||||
<td>41</td>
|
||||
<td>2010/02/12</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Vivian Harrell</td>
|
||||
<td>System Architect</td>
|
||||
<td>San Francisco</td>
|
||||
<td>62</td>
|
||||
<td>2009/02/14</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Timothy Mooney</td>
|
||||
<td>Financial Controller</td>
|
||||
<td>London</td>
|
||||
<td>37</td>
|
||||
<td>2008/12/11</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jackson Bradshaw</td>
|
||||
<td>Director</td>
|
||||
<td>New York</td>
|
||||
<td>65</td>
|
||||
<td>2008/09/26</td>
|
||||
<td>$5,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Miriam Weiss</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2011/02/03</td>
|
||||
<td>$4,965</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bruno Nash</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>38</td>
|
||||
<td>2011/05/03</td>
|
||||
<td>$4,200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Odessa Jackson</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>37</td>
|
||||
<td>2009/08/19</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thor Walton</td>
|
||||
<td>Developer</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2013/08/11</td>
|
||||
<td>$3,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finn Camacho</td>
|
||||
<td>Support Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>47</td>
|
||||
<td>2009/07/07</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Elton Baldwin</td>
|
||||
<td>Data Coordinator</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>64</td>
|
||||
<td>2012/04/09</td>
|
||||
<td>$6,730</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zenaida Frank</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>New York</td>
|
||||
<td>63</td>
|
||||
<td>2010/01/04</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zorita Serrano</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>56</td>
|
||||
<td>2012/06/01</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jennifer Acosta</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>43</td>
|
||||
<td>2013/02/01</td>
|
||||
<td>$2,875</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cara Stevens</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>New York</td>
|
||||
<td>46</td>
|
||||
<td>2011/12/06</td>
|
||||
<td>$4,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Hermione Butler</td>
|
||||
<td>Director</td>
|
||||
<td>London</td>
|
||||
<td>47</td>
|
||||
<td>2011/03/21</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lael Greer</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>London</td>
|
||||
<td>21</td>
|
||||
<td>2009/02/27</td>
|
||||
<td>$3,120</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonas Alexander</td>
|
||||
<td>Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>30</td>
|
||||
<td>2010/07/14</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shad Decker</td>
|
||||
<td>Regional Director</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>51</td>
|
||||
<td>2008/11/13</td>
|
||||
<td>$5,300</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Bruce</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>29</td>
|
||||
<td>2011/06/27</td>
|
||||
<td>$4,080</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Donna Snider</td>
|
||||
<td>System Architect</td>
|
||||
<td>New York</td>
|
||||
<td>27</td>
|
||||
<td>2011/01/25</td>
|
||||
<td>$3,120</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 brush: js;">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
dom: 'T<"clear">lfrtip',
|
||||
tableTools: {
|
||||
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );</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="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
|
||||
<li><a href=
|
||||
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
|
||||
<li><a href="../js/dataTables.tableTools.js">../js/dataTables.tableTools.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 brush: js;"></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/dataTables.tableTools.css">../css/dataTables.tableTools.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">Examples</a></h3>
|
||||
<ul class="toc active">
|
||||
<li><a href="./bootstrap.html">Bootstrap styling</a></li>
|
||||
<li><a href="./button_text.html">Custom button text</a></li>
|
||||
<li><a href="./collection.html">Button collections</a></li>
|
||||
<li><a href="./multi_instance.html">Multiple toolbars</a></li>
|
||||
<li><a href="./alter_buttons.html">Button arrangement</a></li>
|
||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||
<li><a href="./defaults.html">Defaults</a></li>
|
||||
<li><a href="./new_init.html">Initialisation with `new`</a></li>
|
||||
<li><a href="./pdf_message.html">PDF message</a></li>
|
||||
<li><a href="./plug-in.html">Plug-in button types</a></li>
|
||||
<li><a href="./select_os.html">Row selection - operating system style</a></li>
|
||||
<li><a href="./select_single.html">Row selection - single row select</a></li>
|
||||
<li><a href="./simple.html">Basic initialisation</a></li>
|
||||
<li class="active"><a href="./swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="./select_multi.html">Row selection - multi-row select</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/extras">extras</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-2014<br>
|
||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
File diff suppressed because it is too large
Load Diff
66
frontend/static/assets/global/plugins/data-tables/tabletools/js/dataTables.tableTools.min.js
vendored
Normal file
66
frontend/static/assets/global/plugins/data-tables/tabletools/js/dataTables.tableTools.min.js
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
/*!
|
||||
TableTools 2.2.0
|
||||
2009-2014 SpryMedia Ltd - datatables.net/license
|
||||
|
||||
ZeroClipboard 1.0.4
|
||||
Author: Joseph Huckaby - MIT licensed
|
||||
*/
|
||||
var TableTools;
|
||||
(function(l,j,p){var r=function(n){var h={version:"1.0.4-TableTools2",clients:{},moviePath:"",nextId:1,$:function(a){"string"==typeof a&&(a=j.getElementById(a));a.addClass||(a.hide=function(){this.style.display="none"},a.show=function(){this.style.display=""},a.addClass=function(a){this.removeClass(a);this.className+=" "+a},a.removeClass=function(a){this.className=this.className.replace(RegExp("\\s*"+a+"\\s*")," ").replace(/^\s+/,"").replace(/\s+$/,"")},a.hasClass=function(a){return!!this.className.match(RegExp("\\s*"+a+
|
||||
"\\s*"))});return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(a,b,c){(a=this.clients[a])&&a.receiveEvent(b,c)},register:function(a,b){this.clients[a]=b},getDOMObjectPosition:function(a){var b={left:0,top:0,width:a.width?a.width:a.offsetWidth,height:a.height?a.height:a.offsetHeight};""!==a.style.width&&(b.width=a.style.width.replace("px",""));""!==a.style.height&&(b.height=a.style.height.replace("px",""));for(;a;)b.left+=a.offsetLeft,b.top+=a.offsetTop,a=a.offsetParent;return b},
|
||||
Client:function(a){this.handlers={};this.id=h.nextId++;this.movieId="ZeroClipboard_TableToolsMovie_"+this.id;h.register(this.id,this);a&&this.glue(a)}};h.Client.prototype={id:0,ready:!1,movie:null,clipText:"",fileName:"",action:"copy",handCursorEnabled:!0,cssEffects:!0,handlers:null,sized:!1,glue:function(a,b){this.domElement=h.$(a);var c=99;this.domElement.style.zIndex&&(c=parseInt(this.domElement.style.zIndex,10)+1);var d=h.getDOMObjectPosition(this.domElement);this.div=j.createElement("div");var e=
|
||||
this.div.style;e.position="absolute";e.left="0px";e.top="0px";e.width=d.width+"px";e.height=d.height+"px";e.zIndex=c;"undefined"!=typeof b&&""!==b&&(this.div.title=b);0!==d.width&&0!==d.height&&(this.sized=!0);this.domElement&&(this.domElement.appendChild(this.div),this.div.innerHTML=this.getHTML(d.width,d.height).replace(/&/g,"&"))},positionElement:function(){var a=h.getDOMObjectPosition(this.domElement),b=this.div.style;b.position="absolute";b.width=a.width+"px";b.height=a.height+"px";0!==a.width&&
|
||||
0!==a.height&&(this.sized=!0,b=this.div.childNodes[0],b.width=a.width,b.height=a.height)},getHTML:function(a,b){var c="",d="id="+this.id+"&width="+a+"&height="+b;if(navigator.userAgent.match(/MSIE/))var e=location.href.match(/^https/i)?"https://":"http://",c=c+('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="'+a+'" height="'+b+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+
|
||||
h.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+d+'"/><param name="wmode" value="transparent"/></object>');else c+='<embed id="'+this.movieId+'" src="'+h.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+a+'" height="'+b+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+
|
||||
d+'" wmode="transparent" />';return c},hide:function(){this.div&&(this.div.style.left="-2000px")},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=j.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.div=this.domElement=null}},reposition:function(a){a&&((this.domElement=h.$(a))||this.hide());if(this.domElement&&this.div){var a=h.getDOMObjectPosition(this.domElement),b=this.div.style;b.left=""+a.left+
|
||||
"px";b.top=""+a.top+"px"}},clearText:function(){this.clipText="";this.ready&&this.movie.clearText()},appendText:function(a){this.clipText+=a;this.ready&&this.movie.appendText(a)},setText:function(a){this.clipText=a;this.ready&&this.movie.setText(a)},setCharSet:function(a){this.charSet=a;this.ready&&this.movie.setCharSet(a)},setBomInc:function(a){this.incBom=a;this.ready&&this.movie.setBomInc(a)},setFileName:function(a){this.fileName=a;this.ready&&this.movie.setFileName(a)},setAction:function(a){this.action=
|
||||
a;this.ready&&this.movie.setAction(a)},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");this.handlers[a]||(this.handlers[a]=[]);this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;this.ready&&this.movie.setHandCursor(a)},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(a,b){var c,a=a.toString().toLowerCase().replace(/^on/,"");switch(a){case "load":this.movie=j.getElementById(this.movieId);if(!this.movie){c=this;setTimeout(function(){c.receiveEvent("load",
|
||||
null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=!0;return}this.ready=!0;this.movie.clearText();this.movie.appendText(this.clipText);this.movie.setFileName(this.fileName);this.movie.setAction(this.action);this.movie.setCharSet(this.charSet);this.movie.setBomInc(this.incBom);this.movie.setHandCursor(this.handCursorEnabled);break;case "mouseover":this.domElement&&this.cssEffects&&
|
||||
this.recoverActive&&this.domElement.addClass("active");break;case "mouseout":this.domElement&&this.cssEffects&&(this.recoverActive=!1,this.domElement.hasClass("active")&&(this.domElement.removeClass("active"),this.recoverActive=!0));break;case "mousedown":this.domElement&&this.cssEffects&&this.domElement.addClass("active");break;case "mouseup":this.domElement&&this.cssEffects&&(this.domElement.removeClass("active"),this.recoverActive=!1)}if(this.handlers[a])for(var d=0,e=this.handlers[a].length;d<
|
||||
e;d++){var f=this.handlers[a][d];if("function"==typeof f)f(this,b);else if("object"==typeof f&&2==f.length)f[0][f[1]](this,b);else if("string"==typeof f)l[f](this,b)}}};l.ZeroClipboard_TableTools=h;var g,f=jQuery;g=function(a,b){!this instanceof g&&alert("Warning: TableTools must be initialised with the keyword 'new'");this.s={that:this,dt:f.fn.dataTable.Api?(new f.fn.dataTable.Api(a)).settings()[0]:a.fnSettings(),print:{saveStart:-1,saveLength:-1,saveScroll:-1,funcEnd:function(){}},buttonCounter:0,
|
||||
select:{type:"",selected:[],preRowSelect:null,postSelected:null,postDeselected:null,all:!1,selectedClass:""},custom:{},swfPath:"",buttonSet:[],master:!1,tags:{}};this.dom={container:null,table:null,print:{hidden:[],message:null},collection:{collection:null,background:null}};this.classes=f.extend(!0,{},g.classes);this.s.dt.bJUI&&f.extend(!0,this.classes,g.classes_themeroller);this.fnSettings=function(){return this.s};"undefined"==typeof b&&(b={});this._fnConstruct(b);return this};g.prototype={fnGetSelected:function(a){var b=
|
||||
[],c=this.s.dt.aoData,d=this.s.dt.aiDisplay,e;if(a){a=0;for(e=d.length;a<e;a++)c[d[a]]._DTTT_selected&&b.push(c[d[a]].nTr)}else{a=0;for(e=c.length;a<e;a++)c[a]._DTTT_selected&&b.push(c[a].nTr)}return b},fnGetSelectedData:function(){var a=[],b=this.s.dt.aoData,c,d;c=0;for(d=b.length;c<d;c++)b[c]._DTTT_selected&&a.push(this.s.dt.oInstance.fnGetData(c));return a},fnIsSelected:function(a){a=this.s.dt.oInstance.fnGetPosition(a);return!0===this.s.dt.aoData[a]._DTTT_selected?!0:!1},fnSelectAll:function(a){var b=
|
||||
this._fnGetMasterSettings();this._fnRowSelect(!0===a?b.dt.aiDisplay:b.dt.aoData)},fnSelectNone:function(a){this._fnGetMasterSettings();this._fnRowDeselect(this.fnGetSelected(a))},fnSelect:function(a){"single"==this.s.select.type?(this.fnSelectNone(),this._fnRowSelect(a)):"multi"==this.s.select.type&&this._fnRowSelect(a)},fnDeselect:function(a){this._fnRowDeselect(a)},fnGetTitle:function(a){var b="";"undefined"!=typeof a.sTitle&&""!==a.sTitle?b=a.sTitle:(a=j.getElementsByTagName("title"),0<a.length&&
|
||||
(b=a[0].innerHTML));return 4>"¡".toString().length?b.replace(/[^a-zA-Z0-9_\u00A1-\uFFFF\.,\-_ !\(\)]/g,""):b.replace(/[^a-zA-Z0-9_\.,\-_ !\(\)]/g,"")},fnCalcColRatios:function(a){var b=this.s.dt.aoColumns,a=this._fnColumnTargets(a.mColumns),c=[],d=0,e=0,f,g;f=0;for(g=a.length;f<g;f++)a[f]&&(d=b[f].nTh.offsetWidth,e+=d,c.push(d));f=0;for(g=c.length;f<g;f++)c[f]/=e;return c.join("\t")},fnGetTableData:function(a){if(this.s.dt)return this._fnGetDataTablesData(a)},fnSetText:function(a,b){this._fnFlashSetText(a,
|
||||
b)},fnResizeButtons:function(){for(var a in h.clients)if(a){var b=h.clients[a];"undefined"!=typeof b.domElement&&b.domElement.parentNode&&b.positionElement()}},fnResizeRequired:function(){for(var a in h.clients)if(a){var b=h.clients[a];if("undefined"!=typeof b.domElement&&b.domElement.parentNode==this.dom.container&&!1===b.sized)return!0}return!1},fnPrint:function(a,b){b===p&&(b={});a===p||a?this._fnPrintStart(b):this._fnPrintEnd()},fnInfo:function(a,b){var c=f("<div/>").addClass(this.classes.print.info).html(a).appendTo("body");
|
||||
setTimeout(function(){c.fadeOut("normal",function(){c.remove()})},b)},fnContainer:function(){return this.dom.container},_fnConstruct:function(a){var b=this;this._fnCustomiseSettings(a);this.dom.container=j.createElement(this.s.tags.container);this.dom.container.className=this.classes.container;"none"!=this.s.select.type&&this._fnRowSelectConfig();this._fnButtonDefinations(this.s.buttonSet,this.dom.container);this.s.dt.aoDestroyCallback.push({sName:"TableTools",fn:function(){f(b.s.dt.nTBody).off("click.DTTT_Select",
|
||||
"tr");f(b.dom.container).empty()}})},_fnCustomiseSettings:function(a){"undefined"==typeof this.s.dt._TableToolsInit&&(this.s.master=!0,this.s.dt._TableToolsInit=!0);this.dom.table=this.s.dt.nTable;this.s.custom=f.extend({},g.DEFAULTS,a);this.s.swfPath=this.s.custom.sSwfPath;"undefined"!=typeof h&&(h.moviePath=this.s.swfPath);this.s.select.type=this.s.custom.sRowSelect;this.s.select.preRowSelect=this.s.custom.fnPreRowSelect;this.s.select.postSelected=this.s.custom.fnRowSelected;this.s.select.postDeselected=
|
||||
this.s.custom.fnRowDeselected;this.s.custom.sSelectedClass&&(this.classes.select.row=this.s.custom.sSelectedClass);this.s.tags=this.s.custom.oTags;this.s.buttonSet=this.s.custom.aButtons},_fnButtonDefinations:function(a,b){for(var c,d=0,e=a.length;d<e;d++){if("string"==typeof a[d]){if("undefined"==typeof g.BUTTONS[a[d]]){alert("TableTools: Warning - unknown button type: "+a[d]);continue}c=f.extend({},g.BUTTONS[a[d]],!0)}else{if("undefined"==typeof g.BUTTONS[a[d].sExtends]){alert("TableTools: Warning - unknown button type: "+
|
||||
a[d].sExtends);continue}c=f.extend({},g.BUTTONS[a[d].sExtends],!0);c=f.extend(c,a[d],!0)}b.appendChild(this._fnCreateButton(c,f(b).hasClass(this.classes.collection.container)))}},_fnCreateButton:function(a,b){var c=this._fnButtonBase(a,b);a.sAction.match(/flash/)?this._fnFlashConfig(c,a):"text"==a.sAction?this._fnTextConfig(c,a):"div"==a.sAction?this._fnTextConfig(c,a):"collection"==a.sAction&&(this._fnTextConfig(c,a),this._fnCollectionConfig(c,a));return c},_fnButtonBase:function(a,b){var c,d,e;
|
||||
b?(c=a.sTag&&"default"!==a.sTag?a.sTag:this.s.tags.collection.button,d=a.sLinerTag&&"default"!==a.sLinerTag?a.sLiner:this.s.tags.collection.liner,e=this.classes.collection.buttons.normal):(c=a.sTag&&"default"!==a.sTag?a.sTag:this.s.tags.button,d=a.sLinerTag&&"default"!==a.sLinerTag?a.sLiner:this.s.tags.liner,e=this.classes.buttons.normal);c=j.createElement(c);d=j.createElement(d);var f=this._fnGetMasterSettings();c.className=e+" "+a.sButtonClass;c.setAttribute("id","ToolTables_"+this.s.dt.sInstance+
|
||||
"_"+f.buttonCounter);c.appendChild(d);d.innerHTML=a.sButtonText;f.buttonCounter++;return c},_fnGetMasterSettings:function(){if(this.s.master)return this.s;for(var a=g._aInstances,b=0,c=a.length;b<c;b++)if(this.dom.table==a[b].s.dt.nTable)return a[b].s},_fnCollectionConfig:function(a,b){var c=j.createElement(this.s.tags.collection.container);c.style.display="none";c.className=this.classes.collection.container;b._collection=c;j.body.appendChild(c);this._fnButtonDefinations(b.aButtons,c)},_fnCollectionShow:function(a,
|
||||
b){var c=this,d=f(a).offset(),e=b._collection,g=d.left,d=d.top+f(a).outerHeight(),m=f(l).height(),i=f(j).height(),q=f(l).width(),h=f(j).width();e.style.position="absolute";e.style.left=g+"px";e.style.top=d+"px";e.style.display="block";f(e).css("opacity",0);var k=j.createElement("div");k.style.position="absolute";k.style.left="0px";k.style.top="0px";k.style.height=(m>i?m:i)+"px";k.style.width=(q>h?q:h)+"px";k.className=this.classes.collection.background;f(k).css("opacity",0);j.body.appendChild(k);
|
||||
j.body.appendChild(e);m=f(e).outerWidth();q=f(e).outerHeight();g+m>h&&(e.style.left=h-m+"px");d+q>i&&(e.style.top=d-q-f(a).outerHeight()+"px");this.dom.collection.collection=e;this.dom.collection.background=k;setTimeout(function(){f(e).animate({opacity:1},500);f(k).animate({opacity:0.25},500)},10);this.fnResizeButtons();f(k).click(function(){c._fnCollectionHide.call(c,null,null)})},_fnCollectionHide:function(a,b){!(null!==b&&"collection"==b.sExtends)&&null!==this.dom.collection.collection&&(f(this.dom.collection.collection).animate({opacity:0},
|
||||
500,function(){this.style.display="none"}),f(this.dom.collection.background).animate({opacity:0},500,function(){this.parentNode.removeChild(this)}),this.dom.collection.collection=null,this.dom.collection.background=null)},_fnRowSelectConfig:function(){if(this.s.master){var a=this,b=this.s.dt;f(b.nTable).addClass(this.classes.select.table);"os"===this.s.select.type&&(f(b.nTBody).on("mousedown.DTTT_Select","tr",function(a){if(a.shiftKey)f(b.nTBody).css("-moz-user-select","none").one("selectstart.DTTT_Select",
|
||||
"tr",function(){return!1})}),f(b.nTBody).on("mouseup.DTTT_Select","tr",function(){f(b.nTBody).css("-moz-user-select","")}));f(b.nTBody).on("click.DTTT_Select","tr",function(c){var d=a.s.select,e=a.s.dt.oInstance.fnGetPosition(this);if(this.parentNode==b.nTBody&&b.oInstance.fnGetData(this)!==null){if(d.type=="os")if(c.ctrlKey||c.metaKey)a.fnIsSelected(this)?a._fnRowDeselect(this,c):a._fnRowSelect(this,c);else if(c.shiftKey){var g=a.s.dt.aiDisplay.slice(),m=f.inArray(d.lastRow,g),i=f.inArray(e,g);if(a.fnGetSelected().length===
|
||||
0||m===-1)g.splice(f.inArray(e,g)+1,g.length);else{if(m>i)var j=i,i=m,m=j;g.splice(i+1,g.length);g.splice(0,m)}if(a.fnIsSelected(this)){g.splice(f.inArray(e,g),1);a._fnRowDeselect(g,c)}else a._fnRowSelect(g,c)}else if(a.fnIsSelected(this)&&a.fnGetSelected().length===1)a._fnRowDeselect(this,c);else{a.fnSelectNone();a._fnRowSelect(this,c)}else if(a.fnIsSelected(this))a._fnRowDeselect(this,c);else if(d.type=="single"){a.fnSelectNone();a._fnRowSelect(this,c)}else d.type=="multi"&&a._fnRowSelect(this,
|
||||
c);d.lastRow=e}});b.oApi._fnCallbackReg(b,"aoRowCreatedCallback",function(c,d,e){b.aoData[e]._DTTT_selected&&f(c).addClass(a.classes.select.row)},"TableTools-SelectAll")}},_fnRowSelect:function(a,b){var c=this._fnSelectData(a),d=[],e,o;e=0;for(o=c.length;e<o;e++)c[e].nTr&&d.push(c[e].nTr);if(null===this.s.select.preRowSelect||this.s.select.preRowSelect.call(this,b,d,!0)){e=0;for(o=c.length;e<o;e++)c[e]._DTTT_selected=!0,c[e].nTr&&f(c[e].nTr).addClass(this.classes.select.row);null!==this.s.select.postSelected&&
|
||||
this.s.select.postSelected.call(this,d);g._fnEventDispatch(this,"select",d,!0)}},_fnRowDeselect:function(a,b){var c=this._fnSelectData(a),d=[],e,o;e=0;for(o=c.length;e<o;e++)c[e].nTr&&d.push(c[e].nTr);if(null===this.s.select.preRowSelect||this.s.select.preRowSelect.call(this,b,d,!1)){e=0;for(o=c.length;e<o;e++)c[e]._DTTT_selected=!1,c[e].nTr&&f(c[e].nTr).removeClass(this.classes.select.row);null!==this.s.select.postDeselected&&this.s.select.postDeselected.call(this,d);g._fnEventDispatch(this,"select",
|
||||
d,!1)}},_fnSelectData:function(a){var b=[],c,d,e;if(a.nodeName)c=this.s.dt.oInstance.fnGetPosition(a),b.push(this.s.dt.aoData[c]);else if("undefined"!==typeof a.length){d=0;for(e=a.length;d<e;d++)a[d].nodeName?(c=this.s.dt.oInstance.fnGetPosition(a[d]),b.push(this.s.dt.aoData[c])):"number"===typeof a[d]?b.push(this.s.dt.aoData[a[d]]):b.push(a[d])}else b.push(a);return b},_fnTextConfig:function(a,b){var c=this;null!==b.fnInit&&b.fnInit.call(this,a,b);""!==b.sToolTip&&(a.title=b.sToolTip);f(a).hover(function(){b.fnMouseover!==
|
||||
null&&b.fnMouseover.call(this,a,b,null)},function(){b.fnMouseout!==null&&b.fnMouseout.call(this,a,b,null)});null!==b.fnSelect&&g._fnEventListen(this,"select",function(d){b.fnSelect.call(c,a,b,d)});f(a).click(function(d){b.fnClick!==null&&b.fnClick.call(c,a,b,null,d);b.fnComplete!==null&&b.fnComplete.call(c,a,b,null,null);c._fnCollectionHide(a,b)})},_fnFlashConfig:function(a,b){var c=this,d=new h.Client;null!==b.fnInit&&b.fnInit.call(this,a,b);d.setHandCursor(!0);"flash_save"==b.sAction?(d.setAction("save"),
|
||||
d.setCharSet("utf16le"==b.sCharSet?"UTF16LE":"UTF8"),d.setBomInc(b.bBomInc),d.setFileName(b.sFileName.replace("*",this.fnGetTitle(b)))):"flash_pdf"==b.sAction?(d.setAction("pdf"),d.setFileName(b.sFileName.replace("*",this.fnGetTitle(b)))):d.setAction("copy");d.addEventListener("mouseOver",function(){b.fnMouseover!==null&&b.fnMouseover.call(c,a,b,d)});d.addEventListener("mouseOut",function(){b.fnMouseout!==null&&b.fnMouseout.call(c,a,b,d)});d.addEventListener("mouseDown",function(){b.fnClick!==null&&
|
||||
b.fnClick.call(c,a,b,d)});d.addEventListener("complete",function(e,f){b.fnComplete!==null&&b.fnComplete.call(c,a,b,d,f);c._fnCollectionHide(a,b)});this._fnFlashGlue(d,a,b.sToolTip)},_fnFlashGlue:function(a,b,c){var d=this,e=b.getAttribute("id");j.getElementById(e)?a.glue(b,c):setTimeout(function(){d._fnFlashGlue(a,b,c)},100)},_fnFlashSetText:function(a,b){var c=this._fnChunkData(b,8192);a.clearText();for(var d=0,e=c.length;d<e;d++)a.appendText(c[d])},_fnColumnTargets:function(a){var b=[],c=this.s.dt,
|
||||
d,e;if("object"==typeof a){d=0;for(e=c.aoColumns.length;d<e;d++)b.push(!1);d=0;for(e=a.length;d<e;d++)b[a[d]]=!0}else if("visible"==a){d=0;for(e=c.aoColumns.length;d<e;d++)b.push(c.aoColumns[d].bVisible?!0:!1)}else if("hidden"==a){d=0;for(e=c.aoColumns.length;d<e;d++)b.push(c.aoColumns[d].bVisible?!1:!0)}else if("sortable"==a){d=0;for(e=c.aoColumns.length;d<e;d++)b.push(c.aoColumns[d].bSortable?!0:!1)}else{d=0;for(e=c.aoColumns.length;d<e;d++)b.push(!0)}return b},_fnNewline:function(a){return"auto"==
|
||||
a.sNewLine?navigator.userAgent.match(/Windows/)?"\r\n":"\n":a.sNewLine},_fnGetDataTablesData:function(a){var b,c,d,e,g,j=[],i="",h=this.s.dt,l,k=RegExp(a.sFieldBoundary,"g"),n=this._fnColumnTargets(a.mColumns),p="undefined"!=typeof a.bSelectedOnly?a.bSelectedOnly:!1;if(a.bHeader){g=[];b=0;for(c=h.aoColumns.length;b<c;b++)n[b]&&(i=h.aoColumns[b].sTitle.replace(/\n/g," ").replace(/<.*?>/g,"").replace(/^\s+|\s+$/g,""),i=this._fnHtmlDecode(i),g.push(this._fnBoundData(i,a.sFieldBoundary,k)));j.push(g.join(a.sFieldSeperator))}var r=
|
||||
this.fnGetSelected(),p="none"!==this.s.select.type&&p&&0!==r.length,s=h.oInstance.$("tr",a.oSelectorOpts).map(function(a,b){return p&&-1===f.inArray(b,r)?null:h.oInstance.fnGetPosition(b)}).get();d=0;for(e=s.length;d<e;d++){l=h.aoData[s[d]].nTr;g=[];b=0;for(c=h.aoColumns.length;b<c;b++)n[b]&&(i=h.oApi._fnGetCellData(h,s[d],b,"display"),a.fnCellRender?i=a.fnCellRender(i,b,l,s[d])+"":"string"==typeof i?(i=i.replace(/\n/g," "),i=i.replace(/<img.*?\s+alt\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+)).*?>/gi,
|
||||
"$1$2$3"),i=i.replace(/<.*?>/g,"")):i+="",i=i.replace(/^\s+/,"").replace(/\s+$/,""),i=this._fnHtmlDecode(i),g.push(this._fnBoundData(i,a.sFieldBoundary,k)));j.push(g.join(a.sFieldSeperator));a.bOpenRows&&(b=f.grep(h.aoOpenRows,function(a){return a.nParent===l}),1===b.length&&(i=this._fnBoundData(f("td",b[0].nTr).html(),a.sFieldBoundary,k),j.push(i)))}if(a.bFooter&&null!==h.nTFoot){g=[];b=0;for(c=h.aoColumns.length;b<c;b++)n[b]&&null!==h.aoColumns[b].nTf&&(i=h.aoColumns[b].nTf.innerHTML.replace(/\n/g,
|
||||
" ").replace(/<.*?>/g,""),i=this._fnHtmlDecode(i),g.push(this._fnBoundData(i,a.sFieldBoundary,k)));j.push(g.join(a.sFieldSeperator))}return j.join(this._fnNewline(a))},_fnBoundData:function(a,b,c){return""===b?a:b+a.replace(c,b+b)+b},_fnChunkData:function(a,b){for(var c=[],d=a.length,e=0;e<d;e+=b)e+b<d?c.push(a.substring(e,e+b)):c.push(a.substring(e,d));return c},_fnHtmlDecode:function(a){if(-1===a.indexOf("&"))return a;var b=j.createElement("div");return a.replace(/&([^\s]*);/g,function(a,d){if("#"===
|
||||
a.substr(1,1))return String.fromCharCode(Number(d.substr(1)));b.innerHTML=a;return b.childNodes[0].nodeValue})},_fnPrintStart:function(a){var b=this,c=this.s.dt;this._fnPrintHideNodes(c.nTable);this.s.print.saveStart=c._iDisplayStart;this.s.print.saveLength=c._iDisplayLength;a.bShowAll&&(c._iDisplayStart=0,c._iDisplayLength=-1,c.oApi._fnCalculateEnd&&c.oApi._fnCalculateEnd(c),c.oApi._fnDraw(c));if(""!==c.oScroll.sX||""!==c.oScroll.sY)this._fnPrintScrollStart(c),f(this.s.dt.nTable).bind("draw.DTTT_Print",
|
||||
function(){b._fnPrintScrollStart(c)});var d=c.aanFeatures,e;for(e in d)if("i"!=e&&"t"!=e&&1==e.length)for(var g=0,h=d[e].length;g<h;g++)this.dom.print.hidden.push({node:d[e][g],display:"block"}),d[e][g].style.display="none";f(j.body).addClass(this.classes.print.body);""!==a.sInfo&&this.fnInfo(a.sInfo,3E3);a.sMessage&&f("<div/>").addClass(this.classes.print.message).html(a.sMessage).prepend("body");this.s.print.saveScroll=f(l).scrollTop();l.scrollTo(0,0);f(j).bind("keydown.DTTT",function(a){if(a.keyCode==
|
||||
27){a.preventDefault();b._fnPrintEnd.call(b,a)}})},_fnPrintEnd:function(){var a=this.s.dt,b=this.s.print,c=this.dom.print;this._fnPrintShowNodes();if(""!==a.oScroll.sX||""!==a.oScroll.sY)f(this.s.dt.nTable).unbind("draw.DTTT_Print"),this._fnPrintScrollEnd();l.scrollTo(0,b.saveScroll);null!==c.message&&(j.body.removeChild(c.message),c.message=null);f(j.body).removeClass("DTTT_Print");a._iDisplayStart=b.saveStart;a._iDisplayLength=b.saveLength;a.oApi._fnCalculateEnd&&a.oApi._fnCalculateEnd(a);a.oApi._fnDraw(a);
|
||||
f(j).unbind("keydown.DTTT")},_fnPrintScrollStart:function(){var a=this.s.dt;a.nScrollHead.getElementsByTagName("div")[0].getElementsByTagName("table");var b=a.nTable.parentNode,c;c=a.nTable.getElementsByTagName("thead");0<c.length&&a.nTable.removeChild(c[0]);null!==a.nTFoot&&(c=a.nTable.getElementsByTagName("tfoot"),0<c.length&&a.nTable.removeChild(c[0]));c=a.nTHead.cloneNode(!0);a.nTable.insertBefore(c,a.nTable.childNodes[0]);null!==a.nTFoot&&(c=a.nTFoot.cloneNode(!0),a.nTable.insertBefore(c,a.nTable.childNodes[1]));
|
||||
""!==a.oScroll.sX&&(a.nTable.style.width=f(a.nTable).outerWidth()+"px",b.style.width=f(a.nTable).outerWidth()+"px",b.style.overflow="visible");""!==a.oScroll.sY&&(b.style.height=f(a.nTable).outerHeight()+"px",b.style.overflow="visible")},_fnPrintScrollEnd:function(){var a=this.s.dt,b=a.nTable.parentNode;""!==a.oScroll.sX&&(b.style.width=a.oApi._fnStringToCss(a.oScroll.sX),b.style.overflow="auto");""!==a.oScroll.sY&&(b.style.height=a.oApi._fnStringToCss(a.oScroll.sY),b.style.overflow="auto")},_fnPrintShowNodes:function(){for(var a=
|
||||
this.dom.print.hidden,b=0,c=a.length;b<c;b++)a[b].node.style.display=a[b].display;a.splice(0,a.length)},_fnPrintHideNodes:function(a){for(var b=this.dom.print.hidden,c=a.parentNode,d=c.childNodes,e=0,g=d.length;e<g;e++)if(d[e]!=a&&1==d[e].nodeType){var h=f(d[e]).css("display");"none"!=h&&(b.push({node:d[e],display:h}),d[e].style.display="none")}"BODY"!=c.nodeName.toUpperCase()&&this._fnPrintHideNodes(c)}};g._aInstances=[];g._aListeners=[];g.fnGetMasters=function(){for(var a=[],b=0,c=g._aInstances.length;b<
|
||||
c;b++)g._aInstances[b].s.master&&a.push(g._aInstances[b]);return a};g.fnGetInstance=function(a){"object"!=typeof a&&(a=j.getElementById(a));for(var b=0,c=g._aInstances.length;b<c;b++)if(g._aInstances[b].s.master&&g._aInstances[b].dom.table==a)return g._aInstances[b];return null};g._fnEventListen=function(a,b,c){g._aListeners.push({that:a,type:b,fn:c})};g._fnEventDispatch=function(a,b,c,d){for(var e=g._aListeners,f=0,h=e.length;f<h;f++)a.dom.table==e[f].that.dom.table&&e[f].type==b&&e[f].fn(c,d)};
|
||||
g.buttonBase={sAction:"text",sTag:"default",sLinerTag:"default",sButtonClass:"DTTT_button_text",sButtonText:"Button text",sTitle:"",sToolTip:"",sCharSet:"utf8",bBomInc:!1,sFileName:"*.csv",sFieldBoundary:"",sFieldSeperator:"\t",sNewLine:"auto",mColumns:"all",bHeader:!0,bFooter:!0,bOpenRows:!1,bSelectedOnly:!1,oSelectorOpts:p,fnMouseover:null,fnMouseout:null,fnClick:null,fnSelect:null,fnComplete:null,fnInit:null,fnCellRender:null};g.BUTTONS={csv:f.extend({},g.buttonBase,{sAction:"flash_save",sButtonClass:"DTTT_button_csv",
|
||||
sButtonText:"CSV",sFieldBoundary:'"',sFieldSeperator:",",fnClick:function(a,b,c){this.fnSetText(c,this.fnGetTableData(b))}}),xls:f.extend({},g.buttonBase,{sAction:"flash_save",sCharSet:"utf16le",bBomInc:!0,sButtonClass:"DTTT_button_xls",sButtonText:"Excel",fnClick:function(a,b,c){this.fnSetText(c,this.fnGetTableData(b))}}),copy:f.extend({},g.buttonBase,{sAction:"flash_copy",sButtonClass:"DTTT_button_copy",sButtonText:"Copy",fnClick:function(a,b,c){this.fnSetText(c,this.fnGetTableData(b))},fnComplete:function(a,
|
||||
b,c,d){a=d.split("\n").length;a=null===this.s.dt.nTFoot?a-1:a-2;this.fnInfo("<h6>Table copied</h6><p>Copied "+a+" row"+(1==a?"":"s")+" to the clipboard.</p>",1500)}}),pdf:f.extend({},g.buttonBase,{sAction:"flash_pdf",sNewLine:"\n",sFileName:"*.pdf",sButtonClass:"DTTT_button_pdf",sButtonText:"PDF",sPdfOrientation:"portrait",sPdfSize:"A4",sPdfMessage:"",fnClick:function(a,b,c){this.fnSetText(c,"title:"+this.fnGetTitle(b)+"\nmessage:"+b.sPdfMessage+"\ncolWidth:"+this.fnCalcColRatios(b)+"\norientation:"+
|
||||
b.sPdfOrientation+"\nsize:"+b.sPdfSize+"\n--/TableToolsOpts--\n"+this.fnGetTableData(b))}}),print:f.extend({},g.buttonBase,{sInfo:"<h6>Print view</h6><p>Please use your browser's print function to print this table. Press escape when finished.</p>",sMessage:null,bShowAll:!0,sToolTip:"View print view",sButtonClass:"DTTT_button_print",sButtonText:"Print",fnClick:function(a,b){this.fnPrint(!0,b)}}),text:f.extend({},g.buttonBase),select:f.extend({},g.buttonBase,{sButtonText:"Select button",fnSelect:function(a){0!==
|
||||
this.fnGetSelected().length?f(a).removeClass(this.classes.buttons.disabled):f(a).addClass(this.classes.buttons.disabled)},fnInit:function(a){f(a).addClass(this.classes.buttons.disabled)}}),select_single:f.extend({},g.buttonBase,{sButtonText:"Select button",fnSelect:function(a){1==this.fnGetSelected().length?f(a).removeClass(this.classes.buttons.disabled):f(a).addClass(this.classes.buttons.disabled)},fnInit:function(a){f(a).addClass(this.classes.buttons.disabled)}}),select_all:f.extend({},g.buttonBase,
|
||||
{sButtonText:"Select all",fnClick:function(){this.fnSelectAll()},fnSelect:function(a){this.fnGetSelected().length==this.s.dt.fnRecordsDisplay()?f(a).addClass(this.classes.buttons.disabled):f(a).removeClass(this.classes.buttons.disabled)}}),select_none:f.extend({},g.buttonBase,{sButtonText:"Deselect all",fnClick:function(){this.fnSelectNone()},fnSelect:function(a){0!==this.fnGetSelected().length?f(a).removeClass(this.classes.buttons.disabled):f(a).addClass(this.classes.buttons.disabled)},fnInit:function(a){f(a).addClass(this.classes.buttons.disabled)}}),
|
||||
ajax:f.extend({},g.buttonBase,{sAjaxUrl:"/xhr.php",sButtonText:"Ajax button",fnClick:function(a,b){var c=this.fnGetTableData(b);f.ajax({url:b.sAjaxUrl,data:[{name:"tableData",value:c}],success:b.fnAjaxComplete,dataType:"json",type:"POST",cache:!1,error:function(){alert("Error detected when sending table data to server")}})},fnAjaxComplete:function(){alert("Ajax complete")}}),div:f.extend({},g.buttonBase,{sAction:"div",sTag:"div",sButtonClass:"DTTT_nonbutton",sButtonText:"Text button"}),collection:f.extend({},
|
||||
g.buttonBase,{sAction:"collection",sButtonClass:"DTTT_button_collection",sButtonText:"Collection",fnClick:function(a,b){this._fnCollectionShow(a,b)}})};g.buttons=g.BUTTONS;g.classes={container:"DTTT_container",buttons:{normal:"DTTT_button",disabled:"DTTT_disabled"},collection:{container:"DTTT_collection",background:"DTTT_collection_background",buttons:{normal:"DTTT_button",disabled:"DTTT_disabled"}},select:{table:"DTTT_selectable",row:"DTTT_selected selected"},print:{body:"DTTT_Print",info:"DTTT_print_info",
|
||||
message:"DTTT_PrintMessage"}};g.classes_themeroller={container:"DTTT_container ui-buttonset ui-buttonset-multi",buttons:{normal:"DTTT_button ui-button ui-state-default"},collection:{container:"DTTT_collection ui-buttonset ui-buttonset-multi"}};g.DEFAULTS={sSwfPath:"../swf/copy_csv_xls_pdf.swf",sRowSelect:"none",sSelectedClass:null,fnPreRowSelect:null,fnRowSelected:null,fnRowDeselected:null,aButtons:["copy","csv","xls","pdf","print"],oTags:{container:"div",button:"a",liner:"span",collection:{container:"div",
|
||||
button:"a",liner:"span"}}};g.defaults=g.DEFAULTS;g.prototype.CLASS="TableTools";g.version="2.2.0-dev";f.fn.dataTable.Api&&f.fn.dataTable.Api.register("tabletools()",function(){var a=null;0<this.context.length&&(a=g.fnGetInstance(this.context[0].nTable));return a});"function"==typeof f.fn.dataTable&&"function"==typeof f.fn.dataTableExt.fnVersionCheck&&f.fn.dataTableExt.fnVersionCheck("1.9.0")?f.fn.dataTableExt.aoFeatures.push({fnInit:function(a){var b=a.oInit,a=new g(a.oInstance,b.tableTools||b.oTableTools||
|
||||
{});g._aInstances.push(a);return a.dom.container},cFeature:"T",sFeature:"TableTools"}):alert("Warning: TableTools requires DataTables 1.9.0 or newer - www.datatables.net/download");f.fn.DataTable.TableTools=g;"function"==typeof n.fn.dataTable&&"function"==typeof n.fn.dataTableExt.fnVersionCheck&&n.fn.dataTableExt.fnVersionCheck("1.9.0")?n.fn.dataTableExt.aoFeatures.push({fnInit:function(a){a=new g(a.oInstance,"undefined"!=typeof a.oInit.oTableTools?a.oInit.oTableTools:{});g._aInstances.push(a);return a.dom.container},
|
||||
cFeature:"T",sFeature:"TableTools"}):alert("Warning: TableTools 2 requires DataTables 1.9.0 or newer - www.datatables.net/download");n.fn.dataTable.TableTools=g;return n.fn.DataTable.TableTools=g};"function"===typeof define&&define.amd?define("datatables-tabletools",["jquery","datatables"],r):jQuery&&!jQuery.fn.dataTable.TableTools&&r(jQuery,jQuery.fn.dataTable)})(window,document);
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user