First Initial
This commit is contained in:
Nakorn Rientrakrunchai
@@ -0,0 +1,520 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
tr.selected {
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
var oTableTools = new TableTools( oTable, {
|
||||
"buttons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
"pdf",
|
||||
{ "type": "print", "buttonText": "Print me!" }
|
||||
]
|
||||
} );
|
||||
|
||||
$('#demo').before( oTableTools.dom.container );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - initialisation with 'new TableTools()'
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Typically when working with TableTools, the initialisation and insertion into the DOM will be done automatically by DataTables, through the use of the sDom parameter. However, it is also possible to initialise TableTools manually as shown in the example below. Once initialised you can insert the TableTools tool bar node anywhere you wish into the DOM using the <i>instance</i>.dom.container parameter.</p>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
var oTable = $('#example').dataTable();
|
||||
var oTableTools = new TableTools( oTable, {
|
||||
"buttons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
"pdf",
|
||||
{ "type": "print", "buttonText": "Print me!" }
|
||||
]
|
||||
} );
|
||||
|
||||
$('#demo').before( oTableTools.dom.container );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - button arrangement
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>TableTools makes it very simple to arrange the buttons in the toolbar as you see fit. Using the <i>aButtons</i> parameter you can use any of the <a href="http://datatables.net/extras/tabletools/buttons">predefined buttons</a> or <a href="http://datatables.net/extras/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>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [ "copy", "print" ]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,551 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
|
||||
<style type="text/css">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "http://twitter.github.com/bootstrap/assets/css/bootstrap.css";
|
||||
@import "http://datatables.github.com/Plugins/integration/bootstrap/dataTables.bootstrap.css";
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="http://datatables.github.com/Plugins/integration/bootstrap/dataTables.bootstrap.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": 'Save <span class="caret" />',
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools with Twitter Bootstrap
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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/blog/Twitter_Bootstrap_2">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. sDom is supplied to the DataTable with a setup suitable for Bootstrap styling, and a TableTools collection is used to show how it can be used in this environment.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€ היצוא)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": 'Save <span class="caret" />',
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
<p>The following code is included from the <a href="http://datatables.github.com/Plugins/integration/bootstrap/dataTables.bootstrap.js">DataTables bootstrap integration file</a>:</p>
|
||||
|
||||
<pre>// Set the classes that TableTools uses to something suitable for Bootstrap
|
||||
$.extend( true, $.fn.DataTable.TableTools.classes, {
|
||||
"container": "btn-group",
|
||||
"buttons": {
|
||||
"normal": "btn",
|
||||
"disabled": "btn disabled"
|
||||
},
|
||||
"collection": {
|
||||
"container": "DTTT_dropdown dropdown-menu",
|
||||
"buttons": {
|
||||
"normal": "",
|
||||
"disabled": "disabled"
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
// Have the collection use a bootstrap compatible dropdown
|
||||
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
|
||||
"collection": {
|
||||
"container": "ul",
|
||||
"button": "li",
|
||||
"liner": "a"
|
||||
}
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,531 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"sButtonText": "Save for Excel"
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - customised button text
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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 <i>sButtonText</i> parameter of whatever button you wish to alter. The way TableTools allows you to alter a predefined button is by 'extending' it (using the <i>sExtends</i> parameter) and then setting the overriding parameter. A full list of the parameters which can be used is <a href="http://datatables.net/extras/tabletools/button_options">available on the DataTables.net web-site</a>. This example shows how to set the button text as required.</p>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy",
|
||||
"sButtonText": "Copy to clipboard"
|
||||
},
|
||||
{
|
||||
"sExtends": "csv",
|
||||
"sButtonText": "Save to CSV"
|
||||
},
|
||||
{
|
||||
"sExtends": "xls",
|
||||
"sButtonText": "Save for Excel"
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,522 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - button collections
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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 <i>aButtons</i> 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>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"print",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - changing the initialisation defaults
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls" ];
|
||||
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows the basic initialisation of TableTools by simply including the 'T' marker in DataTables' sDom 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 <i>sSwfPath</i> parameter</a> to tell TableTools where to find the SWF file for copy and file save.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€ היצוא)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,221 @@
|
||||
/* Compile using: mxmlc --target-player=10.0.0 ZeroClipboard.as */
|
||||
package {
|
||||
import flash.display.Stage;
|
||||
import flash.display.Sprite;
|
||||
import flash.display.LoaderInfo;
|
||||
import flash.display.StageScaleMode;
|
||||
import flash.events.*;
|
||||
import flash.display.StageAlign;
|
||||
import flash.display.StageScaleMode;
|
||||
import flash.external.ExternalInterface;
|
||||
import flash.system.Security;
|
||||
import flash.utils.*;
|
||||
import flash.system.System;
|
||||
import flash.net.FileReference;
|
||||
import flash.net.FileFilter;
|
||||
|
||||
public class ZeroClipboard extends Sprite {
|
||||
|
||||
private var domId:String = '';
|
||||
private var button:Sprite;
|
||||
private var clipText:String = 'blank';
|
||||
private var fileName:String = '';
|
||||
private var action:String = 'copy';
|
||||
private var incBom:Boolean = true;
|
||||
private var charSet:String = 'utf8';
|
||||
|
||||
|
||||
public function ZeroClipboard() {
|
||||
// constructor, setup event listeners and external interfaces
|
||||
stage.scaleMode = StageScaleMode.EXACT_FIT;
|
||||
flash.system.Security.allowDomain("*");
|
||||
|
||||
// import flashvars
|
||||
var flashvars:Object = LoaderInfo( this.root.loaderInfo ).parameters;
|
||||
domId = flashvars.id;
|
||||
|
||||
// invisible button covers entire stage
|
||||
button = new Sprite();
|
||||
button.buttonMode = true;
|
||||
button.useHandCursor = true;
|
||||
button.graphics.beginFill(0x00FF00);
|
||||
button.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
|
||||
button.alpha = 0.0;
|
||||
addChild(button);
|
||||
|
||||
button.addEventListener(MouseEvent.CLICK, clickHandler);
|
||||
button.addEventListener(MouseEvent.MOUSE_OVER, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseOver', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_OUT, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseOut', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_DOWN, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseDown', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_UP, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseUp', null );
|
||||
} );
|
||||
|
||||
// External functions - readd whenever the stage is made active for IE
|
||||
addCallbacks();
|
||||
stage.addEventListener(Event.ACTIVATE, addCallbacks);
|
||||
|
||||
// signal to the browser that we are ready
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'load', null );
|
||||
}
|
||||
|
||||
public function addCallbacks (evt:Event = null):void {
|
||||
ExternalInterface.addCallback("setHandCursor", setHandCursor);
|
||||
ExternalInterface.addCallback("clearText", clearText);
|
||||
ExternalInterface.addCallback("setText", setText);
|
||||
ExternalInterface.addCallback("appendText", appendText);
|
||||
ExternalInterface.addCallback("setFileName", setFileName);
|
||||
ExternalInterface.addCallback("setAction", setAction);
|
||||
ExternalInterface.addCallback("setCharSet", setCharSet);
|
||||
ExternalInterface.addCallback("setBomInc", setBomInc);
|
||||
}
|
||||
|
||||
|
||||
public function setCharSet(newCharSet:String):void {
|
||||
if ( newCharSet == 'UTF16LE' ) {
|
||||
charSet = newCharSet;
|
||||
} else {
|
||||
charSet = 'UTF8';
|
||||
}
|
||||
}
|
||||
|
||||
public function setBomInc(newBomInc:Boolean):void {
|
||||
incBom = newBomInc;
|
||||
}
|
||||
|
||||
public function clearText():void {
|
||||
clipText = '';
|
||||
}
|
||||
|
||||
public function appendText(newText:String):void {
|
||||
clipText += newText;
|
||||
}
|
||||
|
||||
public function setText(newText:String):void {
|
||||
clipText = newText;
|
||||
}
|
||||
|
||||
public function setFileName(newFileName:String):void {
|
||||
fileName = newFileName;
|
||||
}
|
||||
|
||||
public function setAction(newAction:String):void {
|
||||
action = newAction;
|
||||
}
|
||||
|
||||
public function setHandCursor(enabled:Boolean):void {
|
||||
// control whether the hand cursor is shown on rollover (true)
|
||||
// or the default arrow cursor (false)
|
||||
button.useHandCursor = enabled;
|
||||
}
|
||||
|
||||
|
||||
private function clickHandler(event:Event):void {
|
||||
var fileRef:FileReference = new FileReference();
|
||||
fileRef.addEventListener(Event.COMPLETE, saveComplete);
|
||||
|
||||
if ( action == "save" ) {
|
||||
/* Save as a file */
|
||||
if ( charSet == 'UTF16LE' ) {
|
||||
fileRef.save( strToUTF16LE(clipText), fileName );
|
||||
} else {
|
||||
fileRef.save( strToUTF8(clipText), fileName );
|
||||
}
|
||||
} else if ( action == "pdf" ) {
|
||||
fileRef.save( "This instance of ZeroClipboard is not configured for PDF export. "+
|
||||
"Please use the PDF export version.", fileName+".txt" );
|
||||
} else {
|
||||
/* Copy the text to the clipboard. Note charset and BOM have no effect here */
|
||||
System.setClipboard( clipText );
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'complete', clipText );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private function saveComplete(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'complete', clipText );
|
||||
}
|
||||
|
||||
|
||||
private function getProp( prop:String, opts:Array ):String
|
||||
{
|
||||
var i:int, iLen:int;
|
||||
for ( i=0, iLen=opts.length ; i<iLen ; i++ )
|
||||
{
|
||||
if ( opts[i].indexOf( prop+":" ) != -1 )
|
||||
{
|
||||
return opts[i].replace( prop+":", "" );
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function: strToUTF8
|
||||
* Purpose: Convert a string to the output utf-8
|
||||
* Returns: ByteArray
|
||||
* Inputs: String
|
||||
*/
|
||||
private function strToUTF8( str:String ):ByteArray {
|
||||
var utf8:ByteArray = new ByteArray();
|
||||
|
||||
/* BOM first */
|
||||
if ( incBom ) {
|
||||
utf8.writeByte( 0xEF );
|
||||
utf8.writeByte( 0xBB );
|
||||
utf8.writeByte( 0xBF );
|
||||
}
|
||||
utf8.writeUTFBytes( str );
|
||||
|
||||
return utf8;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function: strToUTF16LE
|
||||
* Purpose: Convert a string to the output utf-16
|
||||
* Returns: ByteArray
|
||||
* Inputs: String
|
||||
* Notes: The fact that this function is needed is a little annoying. Basically, strings in
|
||||
* AS3 are UTF-16 (with surrogate pairs and everything), but characters which take up less
|
||||
* than 8 bytes appear to be stored as only 8 bytes. This function effective adds the
|
||||
* padding required, and the BOM
|
||||
*/
|
||||
private function strToUTF16LE( str:String ):ByteArray {
|
||||
var utf16:ByteArray = new ByteArray();
|
||||
var iChar:uint;
|
||||
var i:uint=0, iLen:uint = str.length;
|
||||
|
||||
/* BOM first */
|
||||
if ( incBom ) {
|
||||
utf16.writeByte( 0xFF );
|
||||
utf16.writeByte( 0xFE );
|
||||
}
|
||||
|
||||
while ( i < iLen ) {
|
||||
iChar = str.charCodeAt(i);
|
||||
|
||||
if ( iChar < 0xFF ) {
|
||||
/* one byte char */
|
||||
utf16.writeByte( iChar );
|
||||
utf16.writeByte( 0 );
|
||||
} else {
|
||||
/* two byte char */
|
||||
utf16.writeByte( iChar & 0x00FF );
|
||||
utf16.writeByte( iChar >> 8 );
|
||||
}
|
||||
|
||||
i++;
|
||||
}
|
||||
|
||||
return utf16;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
/* Compile using: mxmlc --target-player=10.0.0 -static-link-runtime-shared-libraries=true -library-path+=lib ZeroClipboardPdf.as */
|
||||
package {
|
||||
import flash.display.Stage;
|
||||
import flash.display.Sprite;
|
||||
import flash.display.LoaderInfo;
|
||||
import flash.display.StageScaleMode;
|
||||
import flash.events.*;
|
||||
import flash.display.StageAlign;
|
||||
import flash.display.StageScaleMode;
|
||||
import flash.external.ExternalInterface;
|
||||
import flash.system.Security;
|
||||
import flash.utils.*;
|
||||
import flash.system.System;
|
||||
import flash.net.FileReference;
|
||||
import flash.net.FileFilter;
|
||||
|
||||
/* PDF imports */
|
||||
import org.alivepdf.pdf.PDF;
|
||||
import org.alivepdf.data.Grid;
|
||||
import org.alivepdf.data.GridColumn;
|
||||
import org.alivepdf.layout.Orientation;
|
||||
import org.alivepdf.layout.Size;
|
||||
import org.alivepdf.layout.Unit;
|
||||
import org.alivepdf.display.Display;
|
||||
import org.alivepdf.saving.Method;
|
||||
import org.alivepdf.fonts.FontFamily;
|
||||
import org.alivepdf.fonts.Style;
|
||||
import org.alivepdf.fonts.CoreFont;
|
||||
import org.alivepdf.colors.RGBColor;
|
||||
|
||||
public class ZeroClipboard extends Sprite {
|
||||
|
||||
private var domId:String = '';
|
||||
private var button:Sprite;
|
||||
private var clipText:String = 'blank';
|
||||
private var fileName:String = '';
|
||||
private var action:String = 'copy';
|
||||
private var incBom:Boolean = true;
|
||||
private var charSet:String = 'utf8';
|
||||
|
||||
|
||||
public function ZeroClipboard() {
|
||||
// constructor, setup event listeners and external interfaces
|
||||
stage.scaleMode = StageScaleMode.EXACT_FIT;
|
||||
flash.system.Security.allowDomain("*");
|
||||
|
||||
// import flashvars
|
||||
var flashvars:Object = LoaderInfo( this.root.loaderInfo ).parameters;
|
||||
domId = flashvars.id;
|
||||
|
||||
// invisible button covers entire stage
|
||||
button = new Sprite();
|
||||
button.buttonMode = true;
|
||||
button.useHandCursor = true;
|
||||
button.graphics.beginFill(0x00FF00);
|
||||
button.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
|
||||
button.alpha = 0.0;
|
||||
addChild(button);
|
||||
|
||||
button.addEventListener(MouseEvent.CLICK, function(event:Event):void {
|
||||
clickHandler(event);
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_OVER, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseOver', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_OUT, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseOut', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_DOWN, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseDown', null );
|
||||
} );
|
||||
button.addEventListener(MouseEvent.MOUSE_UP, function(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'mouseUp', null );
|
||||
} );
|
||||
|
||||
// External functions - readd whenever the stage is made active for IE
|
||||
addCallbacks();
|
||||
stage.addEventListener(Event.ACTIVATE, addCallbacks);
|
||||
|
||||
// signal to the browser that we are ready
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'load', null );
|
||||
}
|
||||
|
||||
public function addCallbacks (evt:Event = null):void {
|
||||
ExternalInterface.addCallback("setHandCursor", setHandCursor);
|
||||
ExternalInterface.addCallback("clearText", clearText);
|
||||
ExternalInterface.addCallback("setText", setText);
|
||||
ExternalInterface.addCallback("appendText", appendText);
|
||||
ExternalInterface.addCallback("setFileName", setFileName);
|
||||
ExternalInterface.addCallback("setAction", setAction);
|
||||
ExternalInterface.addCallback("setCharSet", setCharSet);
|
||||
ExternalInterface.addCallback("setBomInc", setBomInc);
|
||||
}
|
||||
|
||||
|
||||
public function setCharSet(newCharSet:String):void {
|
||||
if ( newCharSet == 'UTF16LE' ) {
|
||||
charSet = newCharSet;
|
||||
} else {
|
||||
charSet = 'UTF8';
|
||||
}
|
||||
}
|
||||
|
||||
public function setBomInc(newBomInc:Boolean):void {
|
||||
incBom = newBomInc;
|
||||
}
|
||||
|
||||
public function clearText():void {
|
||||
clipText = '';
|
||||
}
|
||||
|
||||
public function appendText(newText:String):void {
|
||||
clipText += newText;
|
||||
}
|
||||
|
||||
public function setText(newText:String):void {
|
||||
clipText = newText;
|
||||
}
|
||||
|
||||
public function setFileName(newFileName:String):void {
|
||||
fileName = newFileName;
|
||||
}
|
||||
|
||||
public function setAction(newAction:String):void {
|
||||
action = newAction;
|
||||
}
|
||||
|
||||
public function setHandCursor(enabled:Boolean):void {
|
||||
// control whether the hand cursor is shown on rollover (true)
|
||||
// or the default arrow cursor (false)
|
||||
button.useHandCursor = enabled;
|
||||
}
|
||||
|
||||
|
||||
private function clickHandler(event:Event):void {
|
||||
var fileRef:FileReference = new FileReference();
|
||||
fileRef.addEventListener(Event.COMPLETE, saveComplete);
|
||||
|
||||
if ( action == "save" ) {
|
||||
/* Save as a file */
|
||||
if ( charSet == 'UTF16LE' ) {
|
||||
fileRef.save( strToUTF16LE(clipText), fileName );
|
||||
} else {
|
||||
fileRef.save( strToUTF8(clipText), fileName );
|
||||
}
|
||||
} else if ( action == "pdf" ) {
|
||||
/* Save as a PDF */
|
||||
var pdf:PDF = configPdf();
|
||||
fileRef.save( pdf.save( Method.LOCAL ), fileName );
|
||||
} else {
|
||||
/* Copy the text to the clipboard. Note charset and BOM have no effect here */
|
||||
System.setClipboard( clipText );
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'complete', clipText );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private function saveComplete(event:Event):void {
|
||||
ExternalInterface.call( 'ZeroClipboard_TableTools.dispatch', domId, 'complete', clipText );
|
||||
}
|
||||
|
||||
|
||||
private function getProp( prop:String, opts:Array ):String
|
||||
{
|
||||
var i:int, iLen:int;
|
||||
for ( i=0, iLen=opts.length ; i<iLen ; i++ )
|
||||
{
|
||||
if ( opts[i].indexOf( prop+":" ) != -1 )
|
||||
{
|
||||
return opts[i].replace( prop+":", "" );
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
|
||||
private function configPdf():PDF
|
||||
{
|
||||
var
|
||||
pdf:PDF,
|
||||
i:int, iLen:int,
|
||||
splitText:Array = clipText.split("--/TableToolsOpts--\n"),
|
||||
opts:Array = splitText[0].split("\n"),
|
||||
dataIn:Array = splitText[1].split("\n"),
|
||||
aColRatio:Array = getProp( 'colWidth', opts ).split('\t'),
|
||||
title:String = getProp( 'title', opts ),
|
||||
message:String = getProp( 'message', opts ),
|
||||
orientation:String = getProp( 'orientation', opts ),
|
||||
size:String = getProp( 'size', opts ),
|
||||
iPageWidth:int = 0,
|
||||
dataOut:Array = [],
|
||||
columns:Array = [],
|
||||
headers:Array,
|
||||
y:int = 0;
|
||||
|
||||
/* Create the PDF */
|
||||
pdf = new PDF( Orientation[orientation.toUpperCase()], Unit.MM, Size[size.toUpperCase()] );
|
||||
pdf.setDisplayMode( Display.FULL_WIDTH );
|
||||
pdf.addPage();
|
||||
iPageWidth = pdf.getCurrentPage().w-20;
|
||||
pdf.textStyle( new RGBColor(0), 1 );
|
||||
|
||||
/* Add the title / message if there is one */
|
||||
pdf.setFont( new CoreFont(FontFamily.HELVETICA), 14 );
|
||||
if ( title != "" )
|
||||
{
|
||||
pdf.writeText(11, title+"\n");
|
||||
}
|
||||
|
||||
pdf.setFont( new CoreFont(FontFamily.HELVETICA), 11 );
|
||||
if ( message != "" )
|
||||
{
|
||||
pdf.writeText(11, message+"\n");
|
||||
}
|
||||
|
||||
/* Data setup. Split up the headers, and then construct the columns */
|
||||
for ( i=0, iLen=dataIn.length ; i<iLen ; i++ )
|
||||
{
|
||||
if ( dataIn[i] != "" )
|
||||
{
|
||||
dataOut.push( dataIn[i].split("\t") );
|
||||
}
|
||||
}
|
||||
headers = dataOut.shift();
|
||||
|
||||
for ( i=0, iLen=headers.length ; i<iLen ; i++ )
|
||||
{
|
||||
columns.push( new GridColumn( " \n"+headers[i]+"\n ", i.toString(), aColRatio[i]*iPageWidth, 'C' ) );
|
||||
}
|
||||
|
||||
var grid:Grid = new Grid(
|
||||
dataOut, /* 1. data */
|
||||
iPageWidth, /* 2. width */
|
||||
100, /* 3. height */
|
||||
new RGBColor (0xE0E0E0), /* 4. headerColor */
|
||||
new RGBColor (0xFFFFFF), /* 5. backgroundColor */
|
||||
true, /* 6. alternateRowColor */
|
||||
new RGBColor ( 0x0 ), /* 7. borderColor */
|
||||
.1, /* 8. border alpha */
|
||||
null, /* 9. joins */
|
||||
columns /* 10. columns */
|
||||
);
|
||||
|
||||
pdf.addGrid( grid, 0, y );
|
||||
return pdf;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function: strToUTF8
|
||||
* Purpose: Convert a string to the output utf-8
|
||||
* Returns: ByteArray
|
||||
* Inputs: String
|
||||
*/
|
||||
private function strToUTF8( str:String ):ByteArray {
|
||||
var utf8:ByteArray = new ByteArray();
|
||||
|
||||
/* BOM first */
|
||||
if ( incBom ) {
|
||||
utf8.writeByte( 0xEF );
|
||||
utf8.writeByte( 0xBB );
|
||||
utf8.writeByte( 0xBF );
|
||||
}
|
||||
utf8.writeUTFBytes( str );
|
||||
|
||||
return utf8;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Function: strToUTF16LE
|
||||
* Purpose: Convert a string to the output utf-16
|
||||
* Returns: ByteArray
|
||||
* Inputs: String
|
||||
* Notes: The fact that this function is needed is a little annoying. Basically, strings in
|
||||
* AS3 are UTF-16 (with surrogate pairs and everything), but characters which take up less
|
||||
* than 8 bytes appear to be stored as only 8 bytes. This function effective adds the
|
||||
* padding required, and the BOM
|
||||
*/
|
||||
private function strToUTF16LE( str:String ):ByteArray {
|
||||
var utf16:ByteArray = new ByteArray();
|
||||
var iChar:uint;
|
||||
var i:uint=0, iLen:uint = str.length;
|
||||
|
||||
/* BOM first */
|
||||
if ( incBom ) {
|
||||
utf16.writeByte( 0xFF );
|
||||
utf16.writeByte( 0xFE );
|
||||
}
|
||||
|
||||
while ( i < iLen ) {
|
||||
iChar = str.charCodeAt(i);
|
||||
|
||||
if ( iChar < 0xFF ) {
|
||||
/* one byte char */
|
||||
utf16.writeByte( iChar );
|
||||
utf16.writeByte( 0 );
|
||||
} else {
|
||||
/* two byte char */
|
||||
utf16.writeByte( iChar & 0x00FF );
|
||||
utf16.writeByte( iChar >> 8 );
|
||||
}
|
||||
|
||||
i++;
|
||||
}
|
||||
|
||||
return utf16;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
@@ -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
|
||||
|
||||
button.DTTT_button_csv,
|
||||
button.DTTT_button_xls,
|
||||
button.DTTT_button_copy,
|
||||
button.DTTT_button_pdf,
|
||||
button.DTTT_button_print {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
button.DTTT_button_csv span,
|
||||
button.DTTT_button_xls span,
|
||||
button.DTTT_button_copy span,
|
||||
button.DTTT_button_pdf span,
|
||||
button.DTTT_button_print span {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
button.DTTT_button_csv span { background: url(../images/csv.png) no-repeat bottom right; }
|
||||
button.DTTT_button_csv:hover span { background: url(../images/csv_hover.png) no-repeat center right; }
|
||||
|
||||
button.DTTT_button_xls span { background: url(../images/xls.png) no-repeat center right; }
|
||||
button.DTTT_button_xls:hover span { background: #f0f0f0 url(../images/xls_hover.png) no-repeat center right; }
|
||||
|
||||
button.DTTT_button_copy span { background: url(../images/copy.png) no-repeat center right; }
|
||||
button.DTTT_button_copy:hover span { background: #f0f0f0 url(../images/copy_hover.png) no-repeat center right; }
|
||||
|
||||
button.DTTT_button_pdf span { background: url(../images/pdf.png) no-repeat center right; }
|
||||
button.DTTT_button_pdf:hover span { background: #f0f0f0 url(../images/pdf_hover.png) no-repeat center right; }
|
||||
|
||||
button.DTTT_button_print span { background: url(../images/print.png) no-repeat center right; }
|
||||
button.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
/*
|
||||
* File: TableTools.css
|
||||
* Description: Styles for TableTools 2 with JUI theming
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
* Language: Javascript
|
||||
* License: LGPL / 3 point BSD
|
||||
* Project: DataTables
|
||||
*
|
||||
* Copyright 2010 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
*
|
||||
* Notes:
|
||||
* Generally speaking, please refer to the TableTools.css file - this file contains basic
|
||||
* modifications to that 'master' stylesheet for ThemeRoller.
|
||||
*
|
||||
* CSS name space:
|
||||
* DTTT DataTables TableTools
|
||||
*
|
||||
* Colour dictionary:
|
||||
* Button border #d0d0d0
|
||||
* Button border hover #999999
|
||||
* Hover background #f0f0f0
|
||||
* Action blue #4b66d9
|
||||
*
|
||||
* Style sheet provides:
|
||||
* CONTAINER TableTools container element and styles applying to all components
|
||||
* SELECTING Row selection styles
|
||||
* COLLECTIONS Drop down list (collection) styles
|
||||
* PRINTING Print display styles
|
||||
* MISC Minor misc styles
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* CONTAINER
|
||||
* TableTools container element and styles applying to all components
|
||||
*/
|
||||
div.DTTT_container {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.DTTT_button {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
padding: 3px 10px;
|
||||
border: 1px solid #d0d0d0;
|
||||
background-color: #fff;
|
||||
color: #333 !important;
|
||||
cursor: pointer;
|
||||
*cursor: hand;
|
||||
}
|
||||
|
||||
.DTTT_button::-moz-focus-inner {
|
||||
border: none !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* 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;
|
||||
background-color: #f3f3f3;
|
||||
overflow: hidden;
|
||||
z-index: 2002;
|
||||
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
div.DTTT_collection_background {
|
||||
background: 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 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: -0.1em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* PRINTING
|
||||
* Print display styles
|
||||
*/
|
||||
|
||||
.DTTT_print_info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
margin-left: -200px;
|
||||
margin-top: -75px;
|
||||
text-align: center;
|
||||
background-color: #3f3f3f;
|
||||
color: white;
|
||||
padding: 10px 30px;
|
||||
|
||||
opacity: 0.9;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 5px 5px 5px 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;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* MISC
|
||||
* Minor misc styles
|
||||
*/
|
||||
|
||||
.DTTT_disabled {
|
||||
color: #999;
|
||||
}
|
||||
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
76
wwwroot/BackendScript/assets/advanced-datatable/extras/TableTools/media/js/TableTools.min.js
vendored
Normal file
76
wwwroot/BackendScript/assets/advanced-datatable/extras/TableTools/media/js/TableTools.min.js
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
// Simple Set Clipboard System
|
||||
// Author: Joseph Huckaby
|
||||
var ZeroClipboard_TableTools={version:"1.0.4-TableTools2",clients:{},moviePath:"",nextId:1,$:function(a){"string"==typeof a&&(a=document.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=ZeroClipboard_TableTools.nextId++;this.movieId="ZeroClipboard_TableToolsMovie_"+this.id;ZeroClipboard_TableTools.register(this.id,this);a&&this.glue(a)}};
|
||||
ZeroClipboard_TableTools.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=ZeroClipboard_TableTools.$(a);var c=99;this.domElement.style.zIndex&&(c=parseInt(this.domElement.style.zIndex)+1);var d=ZeroClipboard_TableTools.getDOMObjectPosition(this.domElement);this.div=document.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))},positionElement:function(){var a=ZeroClipboard_TableTools.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="'+
|
||||
ZeroClipboard_TableTools.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="'+ZeroClipboard_TableTools.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=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.div=this.domElement=null}},reposition:function(a){a&&((this.domElement=ZeroClipboard_TableTools.$(a))||this.hide());if(this.domElement&&this.div){var a=ZeroClipboard_TableTools.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){a=a.toString().toLowerCase().replace(/^on/,"");switch(a){case "load":this.movie=document.getElementById(this.movieId);
|
||||
if(!this.movie){var 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)window[f](this,b)}}};
|
||||
|
||||
|
||||
/*
|
||||
* File: TableTools.min.js
|
||||
* Version: 2.1.4
|
||||
* Author: Allan Jardine (www.sprymedia.co.uk)
|
||||
*
|
||||
* Copyright 2009-2012 Allan Jardine, all rights reserved.
|
||||
*
|
||||
* This source file is free software, under either the GPL v2 license or a
|
||||
* BSD (3 point) style license, as supplied with this software.
|
||||
*
|
||||
* This source file is distributed in the hope that it will be useful, but
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
||||
* or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
|
||||
*/
|
||||
var TableTools;
|
||||
(function(f,n,g){TableTools=function(a,b){!this instanceof TableTools&&alert("Warning: TableTools must be initialised with the keyword 'new'");this.s={that:this,dt: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,{},TableTools.classes);this.s.dt.bJUI&&f.extend(!0,this.classes,TableTools.classes_themeroller);this.fnSettings=function(){return this.s};"undefined"==typeof b&&(b={});this._fnConstruct(b);return this};TableTools.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=g.getElementsByTagName("title"),0<a.length&&(b=a[0].innerHTML));return 4>"\u00a1".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 ZeroClipboard_TableTools.clients)if(a){var b=ZeroClipboard_TableTools.clients[a];"undefined"!=typeof b.domElement&&b.domElement.parentNode&&b.positionElement()}},
|
||||
fnResizeRequired:function(){for(var a in ZeroClipboard_TableTools.clients)if(a){var b=ZeroClipboard_TableTools.clients[a];if("undefined"!=typeof b.domElement&&b.domElement.parentNode==this.dom.container&&!1===b.sized)return!0}return!1},fnPrint:function(a,b){void 0===b&&(b={});void 0===a||a?this._fnPrintStart(b):this._fnPrintEnd()},fnInfo:function(a,b){var c=g.createElement("div");c.className=this.classes.print.info;c.innerHTML=a;g.body.appendChild(c);setTimeout(function(){f(c).fadeOut("normal",function(){g.body.removeChild(c)})},
|
||||
b)},_fnConstruct:function(a){var b=this;this._fnCustomiseSettings(a);this.dom.container=g.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(){b.dom.container.innerHTML=""}})},_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({},TableTools.DEFAULTS,a);this.s.swfPath=this.s.custom.sSwfPath;"undefined"!=typeof ZeroClipboard_TableTools&&(ZeroClipboard_TableTools.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 TableTools.BUTTONS[a[d]]){alert("TableTools: Warning - unknown button type: "+a[d]);continue}c=f.extend({},TableTools.BUTTONS[a[d]],!0)}else{if("undefined"==typeof TableTools.BUTTONS[a[d].sExtends]){alert("TableTools: Warning - unknown button type: "+a[d].sExtends);continue}c=f.extend({},TableTools.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="default"!==a.sTag?a.sTag:this.s.tags.collection.button,d=
|
||||
"default"!==a.sLinerTag?a.sLiner:this.s.tags.collection.liner,e=this.classes.collection.buttons.normal):(c="default"!==a.sTag?a.sTag:this.s.tags.button,d="default"!==a.sLinerTag?a.sLiner:this.s.tags.liner,e=this.classes.buttons.normal);c=g.createElement(c);d=g.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=TableTools._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=g.createElement(this.s.tags.collection.container);c.style.display="none";c.className=this.classes.collection.container;b._collection=c;g.body.appendChild(c);this._fnButtonDefinations(b.aButtons,c)},_fnCollectionShow:function(a,b){var c=this,d=f(a).offset(),e=b._collection,j=d.left,d=d.top+f(a).outerHeight(),m=f(n).height(),h=f(g).height(),k=f(n).width(),
|
||||
o=f(g).width();e.style.position="absolute";e.style.left=j+"px";e.style.top=d+"px";e.style.display="block";f(e).css("opacity",0);var l=g.createElement("div");l.style.position="absolute";l.style.left="0px";l.style.top="0px";l.style.height=(m>h?m:h)+"px";l.style.width=(k>o?k:o)+"px";l.className=this.classes.collection.background;f(l).css("opacity",0);g.body.appendChild(l);g.body.appendChild(e);m=f(e).outerWidth();k=f(e).outerHeight();j+m>o&&(e.style.left=o-m+"px");d+k>h&&(e.style.top=d-k-f(a).outerHeight()+
|
||||
"px");this.dom.collection.collection=e;this.dom.collection.background=l;setTimeout(function(){f(e).animate({opacity:1},500);f(l).animate({opacity:0.25},500)},10);this.fnResizeButtons();f(l).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);f("tr",b.nTBody).live("click",function(c){this.parentNode==b.nTBody&&null!==b.oInstance.fnGetData(this)&&(a.fnIsSelected(this)?a._fnRowDeselect(this,c):"single"==a.s.select.type?(a.fnSelectNone(),a._fnRowSelect(this,c)):"multi"==a.s.select.type&&a._fnRowSelect(this,
|
||||
c))});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,j;e=0;for(j=c.length;e<j;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(j=c.length;e<j;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);TableTools._fnEventDispatch(this,"select",d,!0)}},_fnRowDeselect:function(a,b){var c=this._fnSelectData(a),d=[],e,j;e=0;for(j=c.length;e<j;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(j=c.length;e<j;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);TableTools._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&&TableTools._fnEventListen(this,"select",function(d){b.fnSelect.call(c,a,b,d)});f(a).click(function(){b.fnClick!==null&&b.fnClick.call(c,a,b,null);b.fnComplete!==null&&b.fnComplete.call(c,a,b,null,null);c._fnCollectionHide(a,b)})},_fnFlashConfig:function(a,b){var c=this,d=new ZeroClipboard_TableTools.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");g.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;if("object"==typeof a){i=0;for(iLen=c.aoColumns.length;i<iLen;i++)b.push(!1);i=0;for(iLen=a.length;i<iLen;i++)b[a[i]]=!0}else if("visible"==a){i=0;for(iLen=c.aoColumns.length;i<iLen;i++)b.push(c.aoColumns[i].bVisible?!0:!1)}else if("hidden"==a){i=0;for(iLen=c.aoColumns.length;i<iLen;i++)b.push(c.aoColumns[i].bVisible?!1:!0)}else if("sortable"==a){i=0;for(iLen=c.aoColumns.length;i<iLen;i++)b.push(c.aoColumns[i].bSortable?!0:!1)}else{i=0;for(iLen=c.aoColumns.length;i<
|
||||
iLen;i++)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,j,g=[],h="",k=this.s.dt,o,l=RegExp(a.sFieldBoundary,"g"),n=this._fnColumnTargets(a.mColumns);d="undefined"!=typeof a.bSelectedOnly?a.bSelectedOnly:!1;if(a.bHeader){j=[];b=0;for(c=k.aoColumns.length;b<c;b++)n[b]&&(h=k.aoColumns[b].sTitle.replace(/\n/g," ").replace(/<.*?>/g,"").replace(/^\s+|\s+$/g,""),h=this._fnHtmlDecode(h),
|
||||
j.push(this._fnBoundData(h,a.sFieldBoundary,l)));g.push(j.join(a.sFieldSeperator))}var p=k.aiDisplay;e=this.fnGetSelected();if("none"!==this.s.select.type&&d&&0!==e.length){p=[];b=0;for(c=e.length;b<c;b++)p.push(k.oInstance.fnGetPosition(e[b]))}d=0;for(e=p.length;d<e;d++){o=k.aoData[p[d]].nTr;j=[];b=0;for(c=k.aoColumns.length;b<c;b++)n[b]&&(h=k.oApi._fnGetCellData(k,p[d],b,"display"),a.fnCellRender?h=a.fnCellRender(h,b,o,p[d])+"":"string"==typeof h?(h=h.replace(/\n/g," "),h=h.replace(/<img.*?\s+alt\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+)).*?>/gi,
|
||||
"$1$2$3"),h=h.replace(/<.*?>/g,"")):h+="",h=h.replace(/^\s+/,"").replace(/\s+$/,""),h=this._fnHtmlDecode(h),j.push(this._fnBoundData(h,a.sFieldBoundary,l)));g.push(j.join(a.sFieldSeperator));a.bOpenRows&&(b=f.grep(k.aoOpenRows,function(a){return a.nParent===o}),1===b.length&&(h=this._fnBoundData(f("td",b[0].nTr).html(),a.sFieldBoundary,l),g.push(h)))}if(a.bFooter&&null!==k.nTFoot){j=[];b=0;for(c=k.aoColumns.length;b<c;b++)n[b]&&null!==k.aoColumns[b].nTf&&(h=k.aoColumns[b].nTf.innerHTML.replace(/\n/g,
|
||||
" ").replace(/<.*?>/g,""),h=this._fnHtmlDecode(h),j.push(this._fnBoundData(h,a.sFieldBoundary,l)));g.push(j.join(a.sFieldSeperator))}return _sLastData=g.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=g.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),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 j=0,m=d[e].length;j<m;j++)this.dom.print.hidden.push({node:d[e][j],display:"block"}),d[e][j].style.display="none";f(g.body).addClass(this.classes.print.body);""!==a.sInfo&&this.fnInfo(a.sInfo,3E3);a.sMessage&&(this.dom.print.message=g.createElement("div"),this.dom.print.message.className=this.classes.print.message,this.dom.print.message.innerHTML=a.sMessage,g.body.insertBefore(this.dom.print.message,g.body.childNodes[0]));this.s.print.saveScroll=
|
||||
f(n).scrollTop();n.scrollTo(0,0);f(g).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();n.scrollTo(0,b.saveScroll);null!==c.message&&(g.body.removeChild(c.message),c.message=null);f(g.body).removeClass("DTTT_Print");a._iDisplayStart=b.saveStart;a._iDisplayLength=
|
||||
b.saveLength;a.oApi._fnCalculateEnd(a);a.oApi._fnDraw(a);f(g).unbind("keydown.DTTT")},_fnPrintScrollStart:function(){var a=this.s.dt;a.nScrollHead.getElementsByTagName("div")[0].getElementsByTagName("table");var b=a.nTable.parentNode,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 m=f(d[e]).css("display");"none"!=m&&(b.push({node:d[e],display:m}),d[e].style.display="none")}"BODY"!=c.nodeName&&this._fnPrintHideNodes(c)}};TableTools._aInstances=
|
||||
[];TableTools._aListeners=[];TableTools.fnGetMasters=function(){for(var a=[],b=0,c=TableTools._aInstances.length;b<c;b++)TableTools._aInstances[b].s.master&&a.push(TableTools._aInstances[b]);return a};TableTools.fnGetInstance=function(a){"object"!=typeof a&&(a=g.getElementById(a));for(var b=0,c=TableTools._aInstances.length;b<c;b++)if(TableTools._aInstances[b].s.master&&TableTools._aInstances[b].dom.table==a)return TableTools._aInstances[b];return null};TableTools._fnEventListen=function(a,b,c){TableTools._aListeners.push({that:a,
|
||||
type:b,fn:c})};TableTools._fnEventDispatch=function(a,b,c,d){for(var e=TableTools._aListeners,f=0,g=e.length;f<g;f++)a.dom.table==e[f].that.dom.table&&e[f].type==b&&e[f].fn(c,d)};TableTools.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,fnMouseover:null,
|
||||
fnMouseout:null,fnClick:null,fnSelect:null,fnComplete:null,fnInit:null,fnCellRender:null};TableTools.BUTTONS={csv:f.extend({},TableTools.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({},TableTools.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({},TableTools.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({},TableTools.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({},TableTools.buttonBase,{sInfo:"<h6>Print view</h6><p>Please use your browser's print function to print this table. Press escape when finished.",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({},TableTools.buttonBase),select:f.extend({},TableTools.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({},TableTools.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({},TableTools.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({},
|
||||
TableTools.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({},TableTools.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({},TableTools.buttonBase,{sAction:"div",sTag:"div",sButtonClass:"DTTT_nonbutton",sButtonText:"Text button"}),collection:f.extend({},TableTools.buttonBase,{sAction:"collection",sButtonClass:"DTTT_button_collection",sButtonText:"Collection",fnClick:function(a,b){this._fnCollectionShow(a,b)}})};TableTools.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"},print:{body:"DTTT_Print",info:"DTTT_print_info",message:"DTTT_PrintMessage"}};TableTools.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"}};
|
||||
TableTools.DEFAULTS={sSwfPath:"media/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"}}};TableTools.prototype.CLASS="TableTools";TableTools.VERSION="2.1.4";TableTools.prototype.VERSION=TableTools.VERSION;"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){a=new TableTools(a.oInstance,"undefined"!=typeof a.oInit.oTableTools?a.oInit.oTableTools:{});TableTools._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");f.fn.DataTable.TableTools=TableTools})(jQuery,window,document);
|
||||
Binary file not shown.
@@ -0,0 +1,367 @@
|
||||
// Simple Set Clipboard System
|
||||
// Author: Joseph Huckaby
|
||||
|
||||
var ZeroClipboard_TableTools = {
|
||||
|
||||
version: "1.0.4-TableTools2",
|
||||
clients: {}, // registered upload clients on page, indexed by id
|
||||
moviePath: '', // URL to movie
|
||||
nextId: 1, // ID of next movie
|
||||
|
||||
$: function(thingy) {
|
||||
// simple DOM lookup utility function
|
||||
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
|
||||
if (!thingy.addClass) {
|
||||
// extend element with a few useful methods
|
||||
thingy.hide = function() { this.style.display = 'none'; };
|
||||
thingy.show = function() { this.style.display = ''; };
|
||||
thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
|
||||
thingy.removeClass = function(name) {
|
||||
this.className = this.className.replace( new RegExp("\\s*" + name + "\\s*"), " ").replace(/^\s+/, '').replace(/\s+$/, '');
|
||||
};
|
||||
thingy.hasClass = function(name) {
|
||||
return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
|
||||
}
|
||||
}
|
||||
return thingy;
|
||||
},
|
||||
|
||||
setMoviePath: function(path) {
|
||||
// set path to ZeroClipboard.swf
|
||||
this.moviePath = path;
|
||||
},
|
||||
|
||||
dispatch: function(id, eventName, args) {
|
||||
// receive event from flash movie, send to client
|
||||
var client = this.clients[id];
|
||||
if (client) {
|
||||
client.receiveEvent(eventName, args);
|
||||
}
|
||||
},
|
||||
|
||||
register: function(id, client) {
|
||||
// register new client to receive events
|
||||
this.clients[id] = client;
|
||||
},
|
||||
|
||||
getDOMObjectPosition: function(obj) {
|
||||
// get absolute coordinates for dom element
|
||||
var info = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: obj.width ? obj.width : obj.offsetWidth,
|
||||
height: obj.height ? obj.height : obj.offsetHeight
|
||||
};
|
||||
|
||||
if ( obj.style.width != "" )
|
||||
info.width = obj.style.width.replace("px","");
|
||||
|
||||
if ( obj.style.height != "" )
|
||||
info.height = obj.style.height.replace("px","");
|
||||
|
||||
while (obj) {
|
||||
info.left += obj.offsetLeft;
|
||||
info.top += obj.offsetTop;
|
||||
obj = obj.offsetParent;
|
||||
}
|
||||
|
||||
return info;
|
||||
},
|
||||
|
||||
Client: function(elem) {
|
||||
// constructor for new simple upload client
|
||||
this.handlers = {};
|
||||
|
||||
// unique ID
|
||||
this.id = ZeroClipboard_TableTools.nextId++;
|
||||
this.movieId = 'ZeroClipboard_TableToolsMovie_' + this.id;
|
||||
|
||||
// register client with singleton to receive flash events
|
||||
ZeroClipboard_TableTools.register(this.id, this);
|
||||
|
||||
// create movie
|
||||
if (elem) this.glue(elem);
|
||||
}
|
||||
};
|
||||
|
||||
ZeroClipboard_TableTools.Client.prototype = {
|
||||
|
||||
id: 0, // unique ID for us
|
||||
ready: false, // whether movie is ready to receive events or not
|
||||
movie: null, // reference to movie object
|
||||
clipText: '', // text to copy to clipboard
|
||||
fileName: '', // default file save name
|
||||
action: 'copy', // action to perform
|
||||
handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
|
||||
cssEffects: true, // enable CSS mouse effects on dom container
|
||||
handlers: null, // user event handlers
|
||||
sized: false,
|
||||
|
||||
glue: function(elem, title) {
|
||||
// glue to DOM element
|
||||
// elem can be ID or actual DOM element object
|
||||
this.domElement = ZeroClipboard_TableTools.$(elem);
|
||||
|
||||
// float just above object, or zIndex 99 if dom element isn't set
|
||||
var zIndex = 99;
|
||||
if (this.domElement.style.zIndex) {
|
||||
zIndex = parseInt(this.domElement.style.zIndex) + 1;
|
||||
}
|
||||
|
||||
// find X/Y position of domElement
|
||||
var box = ZeroClipboard_TableTools.getDOMObjectPosition(this.domElement);
|
||||
|
||||
// create floating DIV above element
|
||||
this.div = document.createElement('div');
|
||||
var style = this.div.style;
|
||||
style.position = 'absolute';
|
||||
style.left = '0px';
|
||||
style.top = '0px';
|
||||
style.width = (box.width) + 'px';
|
||||
style.height = box.height + 'px';
|
||||
style.zIndex = zIndex;
|
||||
|
||||
if ( typeof title != "undefined" && title != "" ) {
|
||||
this.div.title = title;
|
||||
}
|
||||
if ( box.width != 0 && box.height != 0 ) {
|
||||
this.sized = true;
|
||||
}
|
||||
|
||||
// style.backgroundColor = '#f00'; // debug
|
||||
if ( this.domElement ) {
|
||||
this.domElement.appendChild(this.div);
|
||||
this.div.innerHTML = this.getHTML( box.width, box.height );
|
||||
}
|
||||
},
|
||||
|
||||
positionElement: function() {
|
||||
var box = ZeroClipboard_TableTools.getDOMObjectPosition(this.domElement);
|
||||
var style = this.div.style;
|
||||
|
||||
style.position = 'absolute';
|
||||
//style.left = (this.domElement.offsetLeft)+'px';
|
||||
//style.top = this.domElement.offsetTop+'px';
|
||||
style.width = box.width + 'px';
|
||||
style.height = box.height + 'px';
|
||||
|
||||
if ( box.width != 0 && box.height != 0 ) {
|
||||
this.sized = true;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
var flash = this.div.childNodes[0];
|
||||
flash.width = box.width;
|
||||
flash.height = box.height;
|
||||
},
|
||||
|
||||
getHTML: function(width, height) {
|
||||
// return HTML for movie
|
||||
var html = '';
|
||||
var flashvars = 'id=' + this.id +
|
||||
'&width=' + width +
|
||||
'&height=' + height;
|
||||
|
||||
if (navigator.userAgent.match(/MSIE/)) {
|
||||
// IE gets an OBJECT tag
|
||||
var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
|
||||
html += '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard_TableTools.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="'+flashvars+'"/><param name="wmode" value="transparent"/></object>';
|
||||
}
|
||||
else {
|
||||
// all other browsers get an EMBED tag
|
||||
html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard_TableTools.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />';
|
||||
}
|
||||
return html;
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
// temporarily hide floater offscreen
|
||||
if (this.div) {
|
||||
this.div.style.left = '-2000px';
|
||||
}
|
||||
},
|
||||
|
||||
show: function() {
|
||||
// show ourselves after a call to hide()
|
||||
this.reposition();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
// destroy control and floater
|
||||
if (this.domElement && this.div) {
|
||||
this.hide();
|
||||
this.div.innerHTML = '';
|
||||
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
try { body.removeChild( this.div ); } catch(e) {;}
|
||||
|
||||
this.domElement = null;
|
||||
this.div = null;
|
||||
}
|
||||
},
|
||||
|
||||
reposition: function(elem) {
|
||||
// reposition our floating div, optionally to new container
|
||||
// warning: container CANNOT change size, only position
|
||||
if (elem) {
|
||||
this.domElement = ZeroClipboard_TableTools.$(elem);
|
||||
if (!this.domElement) this.hide();
|
||||
}
|
||||
|
||||
if (this.domElement && this.div) {
|
||||
var box = ZeroClipboard_TableTools.getDOMObjectPosition(this.domElement);
|
||||
var style = this.div.style;
|
||||
style.left = '' + box.left + 'px';
|
||||
style.top = '' + box.top + 'px';
|
||||
}
|
||||
},
|
||||
|
||||
clearText: function() {
|
||||
// clear the text to be copy / saved
|
||||
this.clipText = '';
|
||||
if (this.ready) this.movie.clearText();
|
||||
},
|
||||
|
||||
appendText: function(newText) {
|
||||
// append text to that which is to be copied / saved
|
||||
this.clipText += newText;
|
||||
if (this.ready) { this.movie.appendText(newText) ;}
|
||||
},
|
||||
|
||||
setText: function(newText) {
|
||||
// set text to be copied to be copied / saved
|
||||
this.clipText = newText;
|
||||
if (this.ready) { this.movie.setText(newText) ;}
|
||||
},
|
||||
|
||||
setCharSet: function(charSet) {
|
||||
// set the character set (UTF16LE or UTF8)
|
||||
this.charSet = charSet;
|
||||
if (this.ready) { this.movie.setCharSet(charSet) ;}
|
||||
},
|
||||
|
||||
setBomInc: function(bomInc) {
|
||||
// set if the BOM should be included or not
|
||||
this.incBom = bomInc;
|
||||
if (this.ready) { this.movie.setBomInc(bomInc) ;}
|
||||
},
|
||||
|
||||
setFileName: function(newText) {
|
||||
// set the file name
|
||||
this.fileName = newText;
|
||||
if (this.ready) this.movie.setFileName(newText);
|
||||
},
|
||||
|
||||
setAction: function(newText) {
|
||||
// set action (save or copy)
|
||||
this.action = newText;
|
||||
if (this.ready) this.movie.setAction(newText);
|
||||
},
|
||||
|
||||
addEventListener: function(eventName, func) {
|
||||
// add user event listener for event
|
||||
// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
|
||||
eventName = eventName.toString().toLowerCase().replace(/^on/, '');
|
||||
if (!this.handlers[eventName]) this.handlers[eventName] = [];
|
||||
this.handlers[eventName].push(func);
|
||||
},
|
||||
|
||||
setHandCursor: function(enabled) {
|
||||
// enable hand cursor (true), or default arrow cursor (false)
|
||||
this.handCursorEnabled = enabled;
|
||||
if (this.ready) this.movie.setHandCursor(enabled);
|
||||
},
|
||||
|
||||
setCSSEffects: function(enabled) {
|
||||
// enable or disable CSS effects on DOM container
|
||||
this.cssEffects = !!enabled;
|
||||
},
|
||||
|
||||
receiveEvent: function(eventName, args) {
|
||||
// receive event from flash
|
||||
eventName = eventName.toString().toLowerCase().replace(/^on/, '');
|
||||
|
||||
// special behavior for certain events
|
||||
switch (eventName) {
|
||||
case 'load':
|
||||
// movie claims it is ready, but in IE this isn't always the case...
|
||||
// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
|
||||
this.movie = document.getElementById(this.movieId);
|
||||
if (!this.movie) {
|
||||
var self = this;
|
||||
setTimeout( function() { self.receiveEvent('load', null); }, 1 );
|
||||
return;
|
||||
}
|
||||
|
||||
// firefox on pc needs a "kick" in order to set these in certain cases
|
||||
if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
|
||||
var self = this;
|
||||
setTimeout( function() { self.receiveEvent('load', null); }, 100 );
|
||||
this.ready = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.ready = true;
|
||||
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':
|
||||
if (this.domElement && this.cssEffects) {
|
||||
//this.domElement.addClass('hover');
|
||||
if (this.recoverActive) this.domElement.addClass('active');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'mouseout':
|
||||
if (this.domElement && this.cssEffects) {
|
||||
this.recoverActive = false;
|
||||
if (this.domElement.hasClass('active')) {
|
||||
this.domElement.removeClass('active');
|
||||
this.recoverActive = true;
|
||||
}
|
||||
//this.domElement.removeClass('hover');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'mousedown':
|
||||
if (this.domElement && this.cssEffects) {
|
||||
this.domElement.addClass('active');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'mouseup':
|
||||
if (this.domElement && this.cssEffects) {
|
||||
this.domElement.removeClass('active');
|
||||
this.recoverActive = false;
|
||||
}
|
||||
break;
|
||||
} // switch eventName
|
||||
|
||||
if (this.handlers[eventName]) {
|
||||
for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
|
||||
var func = this.handlers[eventName][idx];
|
||||
|
||||
if (typeof(func) == 'function') {
|
||||
// actual function reference
|
||||
func(this, args);
|
||||
}
|
||||
else if ((typeof(func) == 'object') && (func.length == 2)) {
|
||||
// PHP style object + method, i.e. [myObject, 'myMethod']
|
||||
func[0][ func[1] ](this, args);
|
||||
}
|
||||
else if (typeof(func) == 'string') {
|
||||
// name of function
|
||||
window[func](this, args);
|
||||
}
|
||||
} // foreach event handler defined
|
||||
} // user defined handler for event
|
||||
}
|
||||
|
||||
};
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip<"clear spacer">T'
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - multiple toolbars
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Like all DataTables control elements, TableTools can have multiple instances specified in the <i>sDom</i> parameter of DataTables. This will create two TableTools toolbars next to the table, providing the same functions. 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>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip<"clear spacer">T'
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('table.display').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - multiple tables
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows how multiple tables can be initialised with DataTables and TableTools in a single call to the $().dataTable() function. Basically it works as you would expect - no special considerations need be made!</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,524 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
},
|
||||
"print"
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows how you can add a message to the saved PDF using the 'sPdfMessage' 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>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy",
|
||||
"csv",
|
||||
"xls",
|
||||
{
|
||||
"sExtends": "pdf",
|
||||
"sPdfOrientation": "landscape",
|
||||
"sPdfMessage": "Your custom message would go here."
|
||||
}
|
||||
"print"
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,539 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
TableTools.BUTTONS.copy_to_div = $.extend( true, 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( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy",
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - plug-ins
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Plug-ins in TableTools take the form of additional buttons types, which provide extra options and flexibility for TableTools. This example shows how a plug-in button type can be defined and then used in the TableTools initialisation. Note that the <i>TableTools.buttonBase</i> object is extended with our required parameters - this base object provides default values for all of the options TableTools can work with, so they don't all have to be defined in our button.</p>
|
||||
<p>Additional plug-ins for TableTools can be found <a href="http://datatables.net/extras/tabletools/plug-ins">on the DataTables.net site</a>. The example plug-in here shows a button which is used to insert the data from the table into a given element.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
|
||||
<div id="copy" class="box" style="height: 100px; overflow: auto"></div>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>TableTools.BUTTONS.copy_to_div = $.extend( true, 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( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
{
|
||||
"sExtends": "copy_to_div",
|
||||
"sButtonText": "Copy to div",
|
||||
"sDiv": "copy",
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,507 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - multi-row select
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows in the table. Row selection is turned off by default in TableTools, but can be enabled using the <i>sRowSelect</i> parameter, set to either 'multi' or 'single'. When set the end user can select rows by simply clicking on them. TableTools provides <a href="http://datatables.net/extras/tabletools/api">a set of API methods</a> and <a href="http://datatables.net/extras/tabletools/initialisation">callbacks</a> for controlling and monitoring the row selection in TableTools. 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>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sRowSelect": "multi",
|
||||
"aButtons": [ "select_all", "select_none" ]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - single row selection
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>As well as providing a button toolbar, TableTools provides everything needed to have selectable rows in the table. Row selection is turned off by default in TableTools, but can be enabled using the <i>sRowSelect</i> parameter, set to either 'multi' or 'single'. When set the end user can select rows by simply clicking on them. TableTools provides <a href="http://datatables.net/extras/tabletools/api">a set of API methods</a> and <a href="http://datatables.net/extras/tabletools/initialisation">callbacks</a> for controlling and monitoring the row selection in TableTools. This example shows single row selection enabled.</p>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sRowSelect": "single"
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,505 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table.css";
|
||||
@import "media/css/TableTools.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - setting SWF path
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<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 this parameter.</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>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip',
|
||||
"oTableTools": {
|
||||
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf"
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,348 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table_jui.css";
|
||||
@import "../../examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
|
||||
@import "media/css/TableTools_JUI.css";
|
||||
.ui-tabs .ui-tabs-panel { padding: 10px }
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../examples/examples_support/jquery-ui-tabs.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
$("#tabs").tabs( {
|
||||
"show": function(event, ui) {
|
||||
var jqTable = $('table.display', ui.panel);
|
||||
if ( jqTable.length > 0 ) {
|
||||
var oTableTools = TableTools.fnGetInstance( jqTable[0] );
|
||||
if ( oTableTools != null && oTableTools.fnResizeRequired() )
|
||||
{
|
||||
/* A resize of TableTools' buttons and DataTables' columns is only required on the
|
||||
* first visible draw of the table
|
||||
*/
|
||||
jqTable.dataTable().fnAdjustColumnSizing();
|
||||
oTableTools.fnResizeButtons();
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
$('#example1').dataTable( {
|
||||
"bJQueryUI": true,
|
||||
"sPaginationType": "full_numbers",
|
||||
"sDom": '<"H"Tfr>t<"F"ip>'
|
||||
} );
|
||||
|
||||
$('#example2').dataTable( {
|
||||
"bJQueryUI": true,
|
||||
"sPaginationType": "full_numbers",
|
||||
"sDom": '<"H"Tfr>t<"F"ip>'
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>This example shows the basic initialisation of TableTools by simply including the 'T' marker in DataTables' sDom 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 <i>sSwfPath</i> parameter</a> to tell TableTools where to find the SWF file for copy and file save.</p>
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li><a href="#tabs-1">Trident browsers</a></li>
|
||||
<li><a href="#tabs-2">Gecko browsers</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="tabs-1">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>Grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>Grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 4.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet
|
||||
Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tabs-2">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>Grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>Grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"sDom": 'T<"clear">lfrtip'
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,524 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
||||
|
||||
<title>TableTools example</title>
|
||||
<style type="text/css" title="currentStyle">
|
||||
@import "../../media/css/demo_page.css";
|
||||
@import "../../media/css/demo_table_jui.css";
|
||||
@import "../../examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
|
||||
@import "media/css/TableTools_JUI.css";
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/ZeroClipboard.js"></script>
|
||||
<script type="text/javascript" charset="utf-8" src="media/js/TableTools.js"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"bJQueryUI": true,
|
||||
"sPaginationType": "full_numbers",
|
||||
"sDom": '<"H"Tfr>t<"F"ip>',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy", "csv", "xls", "pdf",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body id="dt_example">
|
||||
<div id="container">
|
||||
<div class="full_width big">
|
||||
TableTools example - jQuery UI theming
|
||||
</div>
|
||||
|
||||
<h1>Preamble</h1>
|
||||
<p>Like DataTables, TableTools can be styled by a jQuery UI theme. The required classes for the theming with TableTools are added automatically when the <i>bJQueryUI</i> option is detected from DataTables. This example shows that in action, and also defines a button collection to show the themeing there.</p>
|
||||
|
||||
|
||||
<h1>Live example</h1>
|
||||
<div id="demo">
|
||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Rendering engine</th>
|
||||
<th>Browser</th>
|
||||
<th>Platform(s)</th>
|
||||
<th>Engine version</th>
|
||||
<th>CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 4.0</td>
|
||||
<td>Win 95+ (Entity: &)</td>
|
||||
<td class="center">4</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.0</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 5.5</td>
|
||||
<td>Win 95+</td>
|
||||
<td class="center">5.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 6</td>
|
||||
<td>Win 98+</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>Internet Explorer 7</td>
|
||||
<td>Win XP SP2+</td>
|
||||
<td class="center">7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Trident</td>
|
||||
<td>AOL browser (AOL desktop)</td>
|
||||
<td>Win XP</td>
|
||||
<td class="center">6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko (UTF-8: $¢€)</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td class="center">1.9</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.1</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.2</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.2</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.3</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.4</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.4</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.5</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.6</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">1.6</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.7</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.7</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Mozilla 1.8</td>
|
||||
<td>Win 98+ / OSX.1+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Seamonkey 1.1</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Gecko</td>
|
||||
<td>Epiphany 2.20</td>
|
||||
<td>Gnome</td>
|
||||
<td class="center">1.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.2</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">125.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 1.3</td>
|
||||
<td>OSX.3</td>
|
||||
<td class="center">312.8</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 2.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">419.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>Safari 3.0</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">522.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>OmniWeb 5.5</td>
|
||||
<td>OSX.4+</td>
|
||||
<td class="center">420</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>iPod Touch / iPhone</td>
|
||||
<td>iPod</td>
|
||||
<td class="center">420.1</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Webkit</td>
|
||||
<td>S60</td>
|
||||
<td>S60</td>
|
||||
<td class="center">413</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 7.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.0</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 8.5</td>
|
||||
<td>Win 95+ / OSX.2+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.0</td>
|
||||
<td>Win 95+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.2</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera 9.5</td>
|
||||
<td>Win 88+ / OSX.3+</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Opera for Wii</td>
|
||||
<td>Wii</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nokia N800</td>
|
||||
<td>N800</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Presto</td>
|
||||
<td>Nintendo DS browser</td>
|
||||
<td>Nintendo DS</td>
|
||||
<td class="center">8.5</td>
|
||||
<td class="center">C/A<sup>1</sup></td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.1</td>
|
||||
<td>KDE 3.1</td>
|
||||
<td class="center">3.1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.3</td>
|
||||
<td>KDE 3.3</td>
|
||||
<td class="center">3.3</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>KHTML</td>
|
||||
<td>Konqureror 3.5</td>
|
||||
<td>KDE 3.5</td>
|
||||
<td class="center">3.5</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 4.5</td>
|
||||
<td>Mac OS 8-9</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.1</td>
|
||||
<td>Mac OS 7.6-9</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Tasman</td>
|
||||
<td>Internet Explorer 5.2</td>
|
||||
<td>Mac OS 8-X</td>
|
||||
<td class="center">1</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.1</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeA">
|
||||
<td>Misc</td>
|
||||
<td>NetFront 3.4</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">A</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Dillo 0.8</td>
|
||||
<td>Embedded devices</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Links</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="even_gradeX">
|
||||
<td>Misc</td>
|
||||
<td>Lynx</td>
|
||||
<td>Text only</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">X</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>IE Mobile</td>
|
||||
<td>Windows Mobile 6</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="even_gradeC">
|
||||
<td>Misc</td>
|
||||
<td>PSP browser</td>
|
||||
<td>PSP</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">C</td>
|
||||
</tr>
|
||||
<tr class="odd_gradeU">
|
||||
<td>Other browsers</td>
|
||||
<td>All others</td>
|
||||
<td>-</td>
|
||||
<td class="center">-</td>
|
||||
<td class="center">U</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<h1>Initialisation code</h1>
|
||||
<pre>$(document).ready( function () {
|
||||
$('#example').dataTable( {
|
||||
"bJQueryUI": true,
|
||||
"sPaginationType": "full_numbers",
|
||||
"sDom": '<"H"Tfr>t<"F"ip>',
|
||||
"oTableTools": {
|
||||
"aButtons": [
|
||||
"copy", "csv", "xls", "pdf",
|
||||
{
|
||||
"sExtends": "collection",
|
||||
"sButtonText": "Save",
|
||||
"aButtons": [ "csv", "xls", "pdf" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
} );
|
||||
} );</pre>
|
||||
|
||||
|
||||
<h1>Other examples</h1>
|
||||
<ul>
|
||||
<li><a href="index.html">Basic initialisation</a></li>
|
||||
<li><a href="swf_path.html">Setting the SWF path</a></li>
|
||||
<li><a href="alter_buttons.html">Custom button arrangement</a></li>
|
||||
<li><a href="button_text.html">Button text alteration</a></li>
|
||||
<li><a href="collection.html">Using button collections</a></li>
|
||||
<li><a href="theme.html">Using jQuery UI themes</a></li>
|
||||
<li><a href="bootstrap.html">Styling with Twitter Bootstrap</a></li>
|
||||
<li><a href="multi_instance.html">Multiple TableTools toolbars for a single table</a></li>
|
||||
<li><a href="multiple_tables.html">Multiple DataTables with a single initialisation</a></li>
|
||||
<li><a href="select_multi.html">User selectable rows (multiple rows)</a></li>
|
||||
<li><a href="select_single.html">User selectable rows (single row)</a></li>
|
||||
<li><a href="alt_init.html">Alternative initialisation using 'new TableTools()'</a></li>
|
||||
<li><a href="defaults.html">Altering the TableTools defaults</a></li>
|
||||
<li><a href="plug-in.html">TableTools plug-in buttons</a></li>
|
||||
<li><a href="pdf_message.html">Customising the PDF output (adding text and orientation)</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id="footer" style="text-align:center;">
|
||||
<span style="font-size:10px;">
|
||||
TableTools and DataTables © Allan Jardine 2009-2011.<br>
|
||||
Flash 10 save / copy operations are performed by a modified version of <a href="http://code.google.com/p/zeroclipboard/">Zero Clipboard</a>.<br>
|
||||
The icons used in the toolbar are modified from <a href="http://www.addictedtocoffee.de/">Oliver Twardowski's</a> <a href="http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/">Flavours Icon set</a>.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user