Current state

This commit is contained in:
2026-02-07 08:23:18 +01:00
commit 0a4372c40d
22479 changed files with 1553543 additions and 0 deletions

View File

@@ -0,0 +1,552 @@
<!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>AutoFill example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/AutoFill.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/AutoFill.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable, {
"aoColumnDefs": [ {
"fnCallback": function ( ao ) {
var n = document.getElementById('output');
for ( var i=0, iLen=ao.length ; i<iLen ; i++ ) {
n.innerHTML += "Update: old value: {"+
ao[i].oldValue+"} - new value: {"+ao[i].newValue+"}<br>";
}
n.scrollTop = n.scrollHeight;
},
"aTargets": [ "_all" ]
} ]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
AutoFill example
</div>
<h1>Preamble</h1>
<p>
AutoFill provides a number of customisable callback functions so you can tailor it's
actions to exactly what you need. This specific example shows fnCallback, which is fired when the mouse is released. Further documentation is below.
</p>
<ul>
<li>
<b>fnRead</b> - Called when a cell is read for it's value. This allows you to override the default of reading the HTML value (or 'input' elements value if there is one present). For example reading the value from a select list.
<ul>
<li>Parameter 1: Node - TD element to be read from</li>
<li>Returns: String - read value</li>
</ul>
</li>
<li>
<b>fnWrite</b> - Called when a cell is to read to. This allows you to write in a specific format, or perhaps to an element within the cell.
<ul>
<li>Parameter 1: Node - TD element to be written to</li>
<li>Parameter 2: String - Value to write</li>
<li>Parameter 3: Boolean - Last cell to be written (useful for speeding up DataTables' fnUpdate)</li>
<li>Returns: void</li>
</ul>
</li>
<li>
<b>fnStep</b> - Called to calculate the new value to give to a cell
<ul>
<li>Parameter 1: Node - TD element to be written to</li>
<li>Parameter 2: String - Statement with a token to be replace with the calculated value</li>
<li>Parameter 3: Int - Step counter</li>
<li>Parameter 4: Boolean - increment (true), or decrement (false)</li>
<li>Parameter 5: String - Token to replace</li>
<li>Returns: String - string to write into the cell</li>
</ul>
</li>
<li>
<b>fnCallback</b> - Called when the AutoFill is complete, with information about the fill. This can be useful for updating a server database for example.
<ul>
<li>Parameter 1: Array - An array of objects with information about each cell that was written to. Object parameters are: "td", "newValue" and "oldValue".</li>
<li>Returns: void</li>
</ul>
</li>
</ul>
<h1>Live example</h1>
<form>
<div id="output" style="height: 100px; overflow: scroll;">
Information about each update will appear here.<br><br>
</div>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
<li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
<li><a href="inputs.html">Using with input elements</a></li>
<li><a href="callbacks.html">Customisation using callback functions</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable, {
"aoColumnDefs": [ {
"fnCallback": function ( ao ) {
var n = document.getElementById('output');
for ( var i=0, iLen=ao.length ; i&lt;iLen ; i++ ) {
n.innerHTML += "Update: old value: {"+
ao[i].oldValue+"} - new value: {"+ao[i].newValue+"}&lt;br&gt;";
}
n.scrollTop = n.scrollHeight;
},
"aTargets": [ "_all" ]
} ]
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -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>AutoFill example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/AutoFill.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/AutoFill.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable, {
"aoColumnDefs": [ {
"bEnable": false,
"aTargets": [ -1, -2, -3 ]
} ]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
AutoFill example with column selection options
</div>
<h1>Preamble</h1>
<p>
Columns can be enabled (default) and disabled from providing the end user the AutoFill option
by using either aoColumns or aoColumnDefs and the bEnable option. These two arrays work in
<a href="http://datatables.net/usage/columns">exactly the same way has for DataTables</a>.
</p>
<p>
This example shows how disabling columns counting from the right hand side of the table
can be achieved. In this case, the last three columns.
</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
<li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
<li><a href="inputs.html">Using with input elements</a></li>
<li><a href="callbacks.html">Customisation using callback functions</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable, {
"aoColumnDefs": [ {
"bEnable": false,
"aTargets": [ -1, -2, -3 ]
} ]
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,489 @@
<!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>AutoFill example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/AutoFill.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/AutoFill.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
AutoFill example
</div>
<h1>Preamble</h1>
<p>
AutoFill gives an Excel like option to a DataTable to click and drag over multiple
cells, filling in information over the selected cells and incrementing numbers as needed.
</p>
<p>Thanks to <a href="http://www.phoniax.no/">Phoniax AS</a> for their sponsorship of this plug-in for DataTables.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
<li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
<li><a href="inputs.html">Using with input elements</a></li>
<li><a href="callbacks.html">Customisation using callback functions</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable();
new AutoFill( oTable );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,519 @@
<!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>AutoFill example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/AutoFill.css";
td input { width: 90% }
</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/AutoFill.js"></script>
<script type="text/javascript" charset="utf-8">
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
{ "sType": "numeric", "aTargets": [ -2 ] }
]
} );
new AutoFill( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
AutoFill example with input elements
</div>
<h1>Preamble</h1>
<p>
AutoFill works with Input elements and Select elements, as well as plain HTML cells. This
example shows all inputs cells, combined with DataTables' DOM sorting plug-in. You can
even combine input and plain HTML cells if you wanted (useful from something like jEditable).
</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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><input type="text" value="Trident"></td>
<td><input type="text" value="Internet Explorer 4.0"></td>
<td><input type="text" value="Win 95+ (Entity: &amp;)"></td>
<td class="center"><input type="text" value="4"></td>
<td class="center"><input type="text" value="X"></td>
</tr>
<tr class="even_gradeC">
<td><input type="text" value="Trident"></td>
<td><input type="text" value="Internet Explorer 5.0"></td>
<td><input type="text" value="Win 95+"></td>
<td class="center"><input type="text" value="5"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Trident"></td>
<td><input type="text" value="Internet Explorer 5.5"></td>
<td><input type="text" value="Win 95+"></td>
<td class="center"><input type="text" value="5.5"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Trident"></td>
<td><input type="text" value="Internet Explorer 6"></td>
<td><input type="text" value="Win 98+"></td>
<td class="center"><input type="text" value="6"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Trident"></td>
<td><input type="text" value="Internet Explorer 7"></td>
<td><input type="text" value="Win XP SP2+"></td>
<td class="center"><input type="text" value="7"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Trident"></td>
<td><input type="text" value="AOL browser (AOL desktop)"></td>
<td><input type="text" value="Win XP"></td>
<td class="center"><input type="text" value="6"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko (UTF-8: $¢€)"></td>
<td><input type="text" value="Firefox 1.0"></td>
<td><input type="text" value="Win 98+ / OSX.2+"></td>
<td class="center"><input type="text" value="1.7"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Firefox 1.5"></td>
<td><input type="text" value="Win 98+ / OSX.2+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Firefox 2.0"></td>
<td><input type="text" value="Win 98+ / OSX.2+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Firefox 3.0"></td>
<td><input type="text" value="Win 2k+ / OSX.3+"></td>
<td class="center"><input type="text" value="1.9"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Camino 1.0"></td>
<td><input type="text" value="OSX.2+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Camino 1.5"></td>
<td><input type="text" value="OSX.3+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Netscape 7.2"></td>
<td><input type="text" value="Win 95+ / Mac OS 8.6-9.2"></td>
<td class="center"><input type="text" value="1.7"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Netscape Browser 8"></td>
<td><input type="text" value="Win 98SE+"></td>
<td class="center"><input type="text" value="1.7"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Netscape Navigator 9"></td>
<td><input type="text" value="Win 98+ / OSX.2+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.0"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.1"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.1"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.2"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.2"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.3"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.3"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.4"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.4"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.5"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.5"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.6"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.6"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.7"></td>
<td><input type="text" value="Win 98+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.7"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Mozilla 1.8"></td>
<td><input type="text" value="Win 98+ / OSX.1+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Seamonkey 1.1"></td>
<td><input type="text" value="Win 98+ / OSX.2+"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Gecko"></td>
<td><input type="text" value="Epiphany 2.20"></td>
<td><input type="text" value="Gnome"></td>
<td class="center"><input type="text" value="1.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="Safari 1.2"></td>
<td><input type="text" value="OSX.3"></td>
<td class="center"><input type="text" value="125.5"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="Safari 1.3"></td>
<td><input type="text" value="OSX.3"></td>
<td class="center"><input type="text" value="312.8"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="Safari 2.0"></td>
<td><input type="text" value="OSX.4+"></td>
<td class="center"><input type="text" value="419.3"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="Safari 3.0"></td>
<td><input type="text" value="OSX.4+"></td>
<td class="center"><input type="text" value="522.1"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="OmniWeb 5.5"></td>
<td><input type="text" value="OSX.4+"></td>
<td class="center"><input type="text" value="420"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="iPod Touch / iPhone"></td>
<td><input type="text" value="iPod"></td>
<td class="center"><input type="text" value="420.1"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Webkit"></td>
<td><input type="text" value="S60"></td>
<td><input type="text" value="S60"></td>
<td class="center"><input type="text" value="413"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 7.0"></td>
<td><input type="text" value="Win 95+ / OSX.1+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 7.5"></td>
<td><input type="text" value="Win 95+ / OSX.2+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 8.0"></td>
<td><input type="text" value="Win 95+ / OSX.2+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 8.5"></td>
<td><input type="text" value="Win 95+ / OSX.2+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 9.0"></td>
<td><input type="text" value="Win 95+ / OSX.3+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 9.2"></td>
<td><input type="text" value="Win 88+ / OSX.3+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera 9.5"></td>
<td><input type="text" value="Win 88+ / OSX.3+"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Opera for Wii"></td>
<td><input type="text" value="Wii"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Nokia N800"></td>
<td><input type="text" value="N800"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Presto"></td>
<td><input type="text" value="Nintendo DS browser"></td>
<td><input type="text" value="Nintendo DS"></td>
<td class="center"><input type="text" value="8.5"></td>
<td class="center"><input type="text" value="C/A<sup>1</sup>"></td>
</tr>
<tr class="even_gradeC">
<td><input type="text" value="KHTML"></td>
<td><input type="text" value="Konqureror 3.1"></td>
<td><input type="text" value="KDE 3.1"></td>
<td class="center"><input type="text" value="3.1"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="KHTML"></td>
<td><input type="text" value="Konqureror 3.3"></td>
<td><input type="text" value="KDE 3.3"></td>
<td class="center"><input type="text" value="3.3"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="KHTML"></td>
<td><input type="text" value="Konqureror 3.5"></td>
<td><input type="text" value="KDE 3.5"></td>
<td class="center"><input type="text" value="3.5"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="odd_gradeX">
<td><input type="text" value="Tasman"></td>
<td><input type="text" value="Internet Explorer 4.5"></td>
<td><input type="text" value="Mac OS 8-9"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="X"></td>
</tr>
<tr class="even_gradeC">
<td><input type="text" value="Tasman"></td>
<td><input type="text" value="Internet Explorer 5.1"></td>
<td><input type="text" value="Mac OS 7.6-9"></td>
<td class="center"><input type="text" value="1"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="odd_gradeC">
<td><input type="text" value="Tasman"></td>
<td><input type="text" value="Internet Explorer 5.2"></td>
<td><input type="text" value="Mac OS 8-X"></td>
<td class="center"><input type="text" value="1"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="even_gradeA">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="NetFront 3.1"></td>
<td><input type="text" value="Embedded devices"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="odd_gradeA">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="NetFront 3.4"></td>
<td><input type="text" value="Embedded devices"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="A"></td>
</tr>
<tr class="even_gradeX">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="Dillo 0.8"></td>
<td><input type="text" value="Embedded devices"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="X"></td>
</tr>
<tr class="odd_gradeX">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="Links"></td>
<td><input type="text" value="Text only"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="X"></td>
</tr>
<tr class="even_gradeX">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="Lynx"></td>
<td><input type="text" value="Text only"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="X"></td>
</tr>
<tr class="odd_gradeC">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="IE Mobile"></td>
<td><input type="text" value="Windows Mobile 6"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="even_gradeC">
<td><input type="text" value="Misc"></td>
<td><input type="text" value="PSP browser"></td>
<td><input type="text" value="PSP"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="C"></td>
</tr>
<tr class="odd_gradeU">
<td><input type="text" value="Other browsers"></td>
<td><input type="text" value="All others"></td>
<td><input type="text" value="-"></td>
<td class="center"><input type="text" value="-"></td>
<td class="center"><input type="text" value="U"></td>
</tr>
</tbody>
</table>
</div>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
<li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
<li><a href="inputs.html">Using with input elements</a></li>
<li><a href="callbacks.html">Customisation using callback functions</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
{ "sType": "numeric", "aTargets": [ -2 ] }
]
} );
new AutoFill( oTable );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,24 @@
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* AutoFill styles
*/
div.AutoFill_filler {
display: none;
position: absolute;
height: 14px;
width: 14px;
background: url(../images/filler.png) no-repeat center center;
z-index: 1002;
}
div.AutoFill_border {
display: none;
position: absolute;
background-color: #0063dc;
z-index: 1001;
box-shadow: 0px 0px 5px #76b4ff;
-moz-box-shadow: 0px 0px 5px #76b4ff;
-webkit-box-shadow: 0px 0px 5px #76b4ff;
}

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Store for live information for the current drag - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Store for live information for the current drag</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Settings object which contains customisable information for AutoFill instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Settings object which contains customisable information for AutoFill instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Cached information about the border display - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Cached information about the border display</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,77 @@
<!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">
<title>Namespace: Data cache for the position of the DataTables scrolling element (when scrolling
is enabled) - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Data cache for the position of the DataTables scrolling element (when scrolling
is enabled)</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,77 @@
<!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">
<title>Namespace: Data cache for information that we need for scrolling the screen when we near
the edges - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Data cache for information that we need for scrolling the screen when we near
the edges</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,93 @@
<!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">
<title>Class: AutoFill - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Class: AutoFill</h1>
<p class="class-description"><p>AutoFill</p></p>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl><dt id="AutoFill" class=" even"><a name="AutoFill"></a><a name="AutoFill_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new AutoFill</a></span><span class="type-sig"><span class="signature">(DataTables, Configuration)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>AutoFill provides Excel like auto fill features for a DataTable</p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">DataTables</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">Configuration</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>object for AutoFill</p></td></tr>
</tbody>
</table></div>
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Common and useful DOM elements for the class instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Common and useful DOM elements for the class instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: An array of objects - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: An array of objects</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Cached information about the little dragging icon - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Cached information about the little dragging icon </h1>
<sup>the filler</sup>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,371 @@
<!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">
<title>Global - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Global</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_classes">Classes (1)</a></td><td>Namespaces (0)</td></tr><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (13)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (13)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
<div class="doc_summary">
<a name="summary"></a>
<h2>Summary</h2>
<div class="doc_group"><a name="summary_classes"></a><h3 class="subsection-title">Classes</h3>
<dl>
<dt class="even"><span class="type-name"><a href="AutoFill.html">AutoFill</a></span></dt><dd class="even"><p>AutoFill provides Excel like auto fill features for a DataTable</p></dd>
</dl></div><div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>AutoFill version</p></dd>
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnSettings">fnSettings</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {object}</span></span></dt><dd class=" even"><p>Retreieve the settings object from an instance</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnFillerDisplay">_fnFillerDisplay</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Display the drag handle on mouse over cell</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnFillerDragMove">_fnFillerDragMove</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Mouse move event handler for during a move. See if we want to update the display based on the
new cursor position</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnFillerDragStart">_fnFillerDragStart</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Mouse down event handler for starting a drag</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnFillerFinish">_fnFillerFinish</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Mouse release handler - end the drag and take action to update the cells with the needed values</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnFillerPosition">_fnFillerPosition</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Position the filler icon over a cell</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnInit">_fnInit</a></span><span class="type-sig"><span class="signature">(oDT, oConfig)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Initialisation</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnPrep">_fnPrep</a></span><span class="type-sig"><span class="signature">(sStr)</span><span class="type-signature"> &rarr; {Object}</span></span></dt><dd class=" odd"><p>Chunk a string such that it can be filled in by the stepper function</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnReadCell">_fnReadCell</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"> &rarr; {String}</span></span></dt><dd class=" even"><p>Read informaiton from a cell, possibly using live DOM elements if suitable</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnStep">_fnStep</a></span><span class="type-sig"><span class="signature">(nTd, oPrepped, iDiff, bIncrement, sToken)</span><span class="type-signature"> &rarr; {String}</span></span></dt><dd class=" odd"><p>Render a string for it's position in the table after the drag (incrememt numbers)</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnTargetCoords">_fnTargetCoords</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"> &rarr; {Object}</span></span></dt><dd class=" even"><p>Find out the coordinates of a given TD cell in a table</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnUpdateBorder">_fnUpdateBorder</a></span><span class="type-sig"><span class="signature">(nStart, nEnd)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Display the border around one or more cells (from start to end)</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnWriteCell">_fnWriteCell</a></span><span class="type-sig"><span class="signature">(nTd, sVal, bLast)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Write informaiton to a cell, possibly using live DOM elements if suitable</p></dd>
</dl>
</div>
</div>
<div class="doc_details">
<a name="details"></a>
<h2>Details</h2>
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><a name="CLASS"></a><a name="CLASS_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd><dt class=" odd"><a name="VERSION"></a><a name="VERSION_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>AutoFill version</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt id="fnSettings" class=" even"><a name="fnSettings"></a><a name="fnSettings_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnSettings</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"> &rarr; {object}</span></span></span></dt><dd class=" even"><p>Retreieve the settings object from an instance</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Returns:</h5><p class="returns"><p>AutoFill settings object</p></p></div>
<dt id="_fnFillerDisplay" class=" odd"><a name="_fnFillerDisplay"></a><a name="_fnFillerDisplay_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnFillerDisplay</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Display the drag handle on mouse over cell</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Event object</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnFillerDragMove" class=" even"><a name="_fnFillerDragMove"></a><a name="_fnFillerDragMove_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnFillerDragMove</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Mouse move event handler for during a move. See if we want to update the display based on the
new cursor position</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Event object</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnFillerDragStart" class=" odd"><a name="_fnFillerDragStart"></a><a name="_fnFillerDragStart_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnFillerDragStart</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Mouse down event handler for starting a drag</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Event object</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnFillerFinish" class=" even"><a name="_fnFillerFinish"></a><a name="_fnFillerFinish_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnFillerFinish</a></span><span class="type-sig"><span class="signature">(e)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Mouse release handler - end the drag and take action to update the cells with the needed values</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">e</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Event object</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnFillerPosition" class=" odd"><a name="_fnFillerPosition"></a><a name="_fnFillerPosition_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnFillerPosition</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Position the filler icon over a cell</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Cell to position filler icon over</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnInit" class=" even"><a name="_fnInit"></a><a name="_fnInit_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnInit</a></span><span class="type-sig"><span class="signature">(oDT, oConfig)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Initialisation</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">oDT</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>DataTables settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oConfig</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Configuration object for AutoFill</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnPrep" class=" odd"><a name="_fnPrep"></a><a name="_fnPrep_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnPrep</a></span><span class="type-sig"><span class="signature">(sStr)</span><span class="type-signature"> &rarr; {Object}</span></span></span></dt><dd class=" odd"><p>Chunk a string such that it can be filled in by the stepper function</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">sStr</td><td class="type type-param">String</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>String to prep</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>with parameters, iStart, sStr and sPostFix</p></p></div>
<dt id="_fnReadCell" class=" even"><a name="_fnReadCell"></a><a name="_fnReadCell_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnReadCell</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"> &rarr; {String}</span></span></span></dt><dd class=" even"><p>Read informaiton from a cell, possibly using live DOM elements if suitable</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Cell to read</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>Read value</p></p></div>
<dt id="_fnStep" class=" odd"><a name="_fnStep"></a><a name="_fnStep_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnStep</a></span><span class="type-sig"><span class="signature">(nTd, oPrepped, iDiff, bIncrement, sToken)</span><span class="type-signature"> &rarr; {String}</span></span></span></dt><dd class=" odd"><p>Render a string for it's position in the table after the drag (incrememt numbers)</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Cell being written to</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">oPrepped</td><td class="type type-param">Object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Prepared object for the stepper (from _fnPrep)</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">iDiff</td><td class="type type-param">Int</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Step difference</p></td></tr><tr class="odd"><td class="number right_border"><div>4</div></td><td class="name">bIncrement</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Increment (true) or decriment (false)</p></td></tr><tr class="even"><td class="number right_border"><div>5</div></td><td class="name">sToken</td><td class="type type-param">String</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Token to replace</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>Rendered information</p></p></div>
<dt id="_fnTargetCoords" class=" even"><a name="_fnTargetCoords"></a><a name="_fnTargetCoords_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnTargetCoords</a></span><span class="type-sig"><span class="signature">(nTd)</span><span class="type-signature"> &rarr; {Object}</span></span></span></dt><dd class=" even"><p>Find out the coordinates of a given TD cell in a table</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last">undefined</td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>x and y properties, for the position of the cell in the tables DOM</p></p></div>
<dt id="_fnUpdateBorder" class=" odd"><a name="_fnUpdateBorder"></a><a name="_fnUpdateBorder_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnUpdateBorder</a></span><span class="type-sig"><span class="signature">(nStart, nEnd)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Display the border around one or more cells (from start to end)</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nStart</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Starting cell</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">nEnd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Ending cell</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="_fnWriteCell" class=" even"><a name="_fnWriteCell"></a><a name="_fnWriteCell_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnWriteCell</a></span><span class="type-sig"><span class="signature">(nTd, sVal, bLast)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Write informaiton to a cell, possibly using live DOM elements if suitable</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">nTd</td><td class="type type-param">Node</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Cell to write</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">sVal</td><td class="type type-param">String</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Value to write</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">bLast</td><td class="type type-param">Boolean</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Flag to show if this is that last update</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
</dd>
</div>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!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">
<title>Table of Contents - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
</div>
<div class="fw_content">
<h3 class="subsection-title">Table of Contents</h3>
<dl>
<dt><a href="AutoFill.html">AutoFill</a></dt><dd><p>AutoFill provides Excel like auto fill features for a DataTable</p></dd>
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,393 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.12.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
html, body {
margin: 0;
padding: 0;
width: 100%;
font: 14px/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color: #111;
}
div.fw_container {
width: 980px;
padding-top: 2em;
margin: 0 auto;
}
div.fw_header {
position: relative;
}
div.fw_content {
padding-top: 2em;
}
div.fw_footer {
padding-top: 4em;
font-size: 75%;
text-align: center;
}
.type-attr .type-signature {
background-color: #ccc;
color: white;
border-radius: 3px;
display: inline-block;
padding: 0 3px;
font-size: 0.9em;
}
.type-attr {
float: right;
color: #999;
}
.type-name {
font-weight: bold;
}
.type-sig {
color: #999;
}
.type-param {
color: #D32929;
}
.type-return {
color: #FF8080;
}
.type-brace {
color: #111;
}
.example-code {
margin-left: 30px;
}
.example-code td.code {
border-top: 1px solid #4E6CA3 !important;
}
.type-augmented {
position: absolute;
left: 8px;
top: 0;
}
dt, dd {
padding: 0.4em 10px;
}
dt {
padding-bottom: 0 !important;
}
dd {
position: relative;
padding-top: 0 !important;
padding-left: 3em;
}
dt.even, dd.even {
background-color: white;
}
dt.odd, dd.odd {
background-color: #F2F2F2;
}
div.doc_overview dd, div.doc_overview dt {
padding-left: 0 !important;
}
.right_border div {
width: 20px;
padding: 2px 0.5em 2px 1em;
text-align: right;
}
.right_border {
border-right: 3px solid #4E6CA3;
}
.bottom_border {
border-bottom: 1px solid #4E6CA3;
}
a {
text-decoration: none;
color: #4E6CA3;
}
a:hover {
text-decoration: underline;
cursor: pointer;
*cursor: hand;
}
div.fw_content ul {
list-style-image: url('../images/arrow.png');
padding: 0 0 0 2em;
}
/*
h2 {
font-size: 1.4em;
margin-top: 2em;
border-bottom: 3px solid #829ac6;
padding-left: 5px;
}
h3 {
font-size: 1.2em;
margin-top: 1em;
border-bottom: 1px solid #A4B5D5;
padding-left: 5px;
}
*/
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
padding-top: 5px;
}
h2.ancestors {
font-size: 14px;
margin: 0;
}
h3 {
font-size: 1.3em;
padding-top: 5px;
margin-bottom: 5px;
}
h5 {
padding-top: 6px;
font-weight: bold;
font-size: 0.9em;
border-bottom: 1px solid #cad4e6;
margin-bottom: 1em;
}
div.doc_summary, div.doc_details {
margin-top: 2em;
clear: both;
}
div.doc_group {
margin-top: 1em;
border-top: 1px solid #A4B5D5;
border-left: 1px solid #A4B5D5;
padding-left: 10px;
}
div.extended {
margin-left: 30px;
}
table.params {
margin-left: 30px;
width: 97%;
}
table.params th,
table.params td {
padding: 3px;
}
tr.odd {
background-color: white;
}
tr.even {
background-color: #F8F8F8;
}
th.name,
td.name {
padding-left: 13px;
}
td.number {
background-color: white;
color: #5C5C5C;
}
dd.odd td.number {
background-color: #F2F2F2;
}
p {
margin: 1em 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
p.returns {
margin-left: 5%;
}
div.page-info {
position: absolute;
top: 0;
right: 0;
}
.private {
display: none;
}
code {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
padding: 2px 4px !important;
white-space: pre;
font-size: 0.9em;
color: #D14;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
padding: 6px 10px;
}
pre>code {
background-color: transparent;
border: none;
color: #111;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
ol {
list-style-type: decimal;
list-style-position: outside;
padding-left: 30px;
}
div.fw_nav {
position: fixed;
top: 25px;
right: 30px;
width: 250px;
border: 1px solid #A4B5D5;
background-color: white;
padding: 10px;
z-index: 1001;
font-size: 12px;
overflow: hidden;
}
div.fw_nav h2 {
margin: -10px 0 10px -10px;
width: 250px;
padding: 5px 10px;
background-color: #A4B5D5;
font-size: 12px;
cursor: pointer;
*cursor: hand;
}
div.fw_nav ul>li>div {
padding: 0 0 0 1em;
}
div.nav_blocker {
float: right;
}
div.fw_nav td {
color: #999;
}
div.fw_nav li {
margin-bottom: 5px;
}
div.fw_nav li>a {
font-weight: bold;
}
.css_clear {
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.css_right {
text-align: right;
}
.css_center {
text-align: center;
}
.css_spacing {
margin-top: 1.5em;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}

View File

@@ -0,0 +1,226 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 2px 0.5em 2px 1em !important;
}
.syntaxhighlighter table td.code .line {
padding: 2px 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
background: none !important;
}
.syntaxhighlighter.printing .line .number {
color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
color: black !important;
}
.syntaxhighlighter.printing .toolbar {
display: none !important;
}
.syntaxhighlighter.printing a {
text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
color: blue !important;
}
.syntaxhighlighter.printing .keyword {
color: #006699 !important;
font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
color: gray !important;
}
.syntaxhighlighter.printing .variable {
color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
color: black !important;
}

View File

@@ -0,0 +1,128 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter {
background-color: white !important;
font-size: 14px !important;
overflow: visible !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #F8F8F8 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: black !important;
}
.syntaxhighlighter table caption {
color: black !important;
}
.syntaxhighlighter .gutter {
}
.syntaxhighlighter .gutter div {
color: #5C5C5C !important;
width: 20px !important;
}
.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter .gutter .line.alt2 {
background-color: white !important;
}
.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter .gutter .line.alt2 {
background-color: #F2F2F2 !important;
}
.syntaxhighlighter .gutter .line {
border-right: 3px solid #4E6CA3 !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #4E6CA3 !important;
color: white !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
color: blue !important;
background: white !important;
border: 1px solid #4E6CA3 !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: red !important;
}
.syntaxhighlighter .toolbar {
color: white !important;
background: #4E6CA3 !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,121 @@
(function() {
var showingNav = true;
$(document).ready( function () {
var jqNav = $('div.fw_nav');
jqNav.css('right', ($(window).width() - $('div.fw_container').width()) /2);
var n = $('div.nav_blocker')[0];
n.style.height = $(jqNav).outerHeight()+"px";
n.style.width = ($(jqNav).outerWidth()+20)+"px";
SyntaxHighlighter.highlight();
$('#private_toggle').click( function () {
if ( $('input[name=show_private]').val() == 0 ) {
$('input[name=show_private]').val( 1 );
$('#private_label').html('Showing');
$('.private').css('display', 'block');
} else {
$('input[name=show_private]').val( 0 );
$('#private_label').html('Hiding');
$('.private').css('display', 'none');
}
fnWriteCookie();
return false;
} );
$('#extended_toggle').click( function () {
if ( $('input[name=show_extended]').val() == 0 ) {
$('input[name=show_extended]').val( 1 );
$('#extended_label').html('Showing');
$('.augmented').css('display', 'block');
} else {
$('input[name=show_extended]').val( 0 );
$('#extended_label').html('Hiding');
$('.augmented').css('display', 'none');
}
fnWriteCookie();
return false;
} );
var savedHeight = $(jqNav).height();
$('div.fw_nav h2').click( function () {
if ( showingNav ) {
$('div.fw_nav').animate( {
"height": 10,
"opacity": 0.3
} );
showingNav = false;
} else {
$('div.fw_nav').animate( {
"height": savedHeight,
"opacity": 1
} );
showingNav = true;
}
fnWriteCookie();
} );
var cookie = fnReadCookie( 'SpryMedia_JSDoc' );
if ( cookie != null ) {
var a = cookie.split('-');
if ( a[0] == 1 ) {
$('#private_toggle').click();
}
if ( a[1] == 0 ) {
$('#extended_toggle').click();
}
if ( a[2] == 'false' ) {
$('div.fw_nav').css('height', 10).css('opacity', 0.3);
showingNav = false;
}
}
} );
function fnWriteCookie()
{
var sVal =
$('input[name=show_private]').val()+'-'+
$('input[name=show_extended]').val()+'-'+
showingNav;
fnCreateCookie( 'SpryMedia_JSDoc', sVal );
}
function fnCreateCookie( sName, sValue )
{
var iDays = 365;
var date = new Date();
date.setTime( date.getTime()+(iDays*24*60*60*1000) );
var sExpires = "; expires="+date.toGMTString();
document.cookie = sName+"="+sValue+sExpires+"; path=/";
}
function fnReadCookie( sName )
{
var sNameEQ = sName + "=";
var sCookieContents = document.cookie.split(';');
for( var i=0 ; i<sCookieContents.length ; i++ ) {
var c = sCookieContents[i];
while (c.charAt(0)==' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(sNameEQ) == 0) {
return c.substring(sNameEQ.length,c.length);
}
}
return null;
}
})();

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,52 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
var keywords = 'break case catch continue ' +
'default delete do else false ' +
'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with'
;
var r = SyntaxHighlighter.regexLib;
this.regexList = [
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.forHtmlScript(r.scriptScriptTags);
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['js', 'jscript', 'javascript'];
SyntaxHighlighter.brushes.JScript = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,20 @@
Copyright (c) 2003, 2004 Jim Weirich
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,820 @@
/*
* File: AutoFill.js
* Version: 1.1.2
* CVS: $Id$
* Description: AutoFill for DataTables
* Author: Allan Jardine (www.sprymedia.co.uk)
* Created: Mon 6 Sep 2010 16:54:41 BST
* Modified: $Date$ by $Author$
* Language: Javascript
* License: GPL v2 or BSD 3 point
* Project: DataTables
* Contact: www.sprymedia.co.uk/contact
*
* Copyright 2010-2011 Allan Jardine, all rights reserved.
*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, available at:
* http://datatables.net/license_gpl2
* http://datatables.net/license_bsd
*
*/
/* Global scope for AutoFill */
var AutoFill;
(function($) {
/**
* AutoFill provides Excel like auto fill features for a DataTable
* @class AutoFill
* @constructor
* @param {object} DataTables settings object
* @param {object} Configuration object for AutoFill
*/
AutoFill = function( oDT, oConfig )
{
/* Santiy check that we are a new instance */
if ( !this.CLASS || this.CLASS != "AutoFill" )
{
alert( "Warning: AutoFill must be initialised with the keyword 'new'" );
return;
}
if ( !$.fn.dataTableExt.fnVersionCheck('1.7.0') )
{
alert( "Warning: AutoFill requires DataTables 1.7 or greater - www.datatables.net/download");
return;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public class variables
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* @namespace Settings object which contains customisable information for AutoFill instance
*/
this.s = {
/**
* @namespace Cached information about the little dragging icon (the filler)
*/
"filler": {
"height": 0,
"width": 0
},
/**
* @namespace Cached information about the border display
*/
"border": {
"width": 2
},
/**
* @namespace Store for live information for the current drag
*/
"drag": {
"startX": -1,
"startY": -1,
"startTd": null,
"endTd": null,
"dragging": false
},
/**
* @namespace Data cache for information that we need for scrolling the screen when we near
* the edges
*/
"screen": {
"interval": null,
"y": 0,
"height": 0,
"scrollTop": 0
},
/**
* @namespace Data cache for the position of the DataTables scrolling element (when scrolling
* is enabled)
*/
"scroller": {
"top": 0,
"bottom": 0
},
/**
* @namespace Information stored for each column. An array of objects
*/
"columns": []
};
/**
* @namespace Common and useful DOM elements for the class instance
*/
this.dom = {
"table": null,
"filler": null,
"borderTop": null,
"borderRight": null,
"borderBottom": null,
"borderLeft": null,
"currentTarget": null
};
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public class methods
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Retreieve the settings object from an instance
* @method fnSettings
* @returns {object} AutoFill settings object
*/
this.fnSettings = function () {
return this.s;
};
/* Constructor logic */
this._fnInit( oDT, oConfig );
return this;
};
AutoFill.prototype = {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Private methods (they are of course public in JS, but recommended as private)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Initialisation
* @method _fnInit
* @param {object} oDT DataTables settings object
* @param {object} oConfig Configuration object for AutoFill
* @returns void
*/
"_fnInit": function ( oDT, oConfig )
{
var
that = this,
i, iLen;
/*
* Settings
*/
this.s.dt = oDT.fnSettings();
this.dom.table = this.s.dt.nTable;
/* Add and configure the columns */
for ( i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
{
this._fnAddColumn( i );
}
if ( typeof oConfig != 'undefined' && typeof oConfig.aoColumnDefs != 'undefined' )
{
this._fnColumnDefs( oConfig.aoColumnDefs );
}
if ( typeof oConfig != 'undefined' && typeof oConfig.aoColumns != 'undefined' )
{
this._fnColumnsAll( oConfig.aoColumns );
}
/*
* DOM
*/
/* Auto Fill click and drag icon */
var filler = document.createElement('div');
filler.className = "AutoFill_filler";
document.body.appendChild( filler );
this.dom.filler = filler;
filler.style.display = "block";
this.s.filler.height = $(filler).height();
this.s.filler.width = $(filler).width();
filler.style.display = "none";
/* Border display - one div for each side. We can't just use a single one with a border, as
* we want the events to effectively pass through the transparent bit of the box
*/
var border;
var appender = document.body;
if ( that.s.dt.oScroll.sY !== "" )
{
that.s.dt.nTable.parentNode.style.position = "relative";
appender = that.s.dt.nTable.parentNode;
}
border = document.createElement('div');
border.className = "AutoFill_border";
appender.appendChild( border );
this.dom.borderTop = border;
border = document.createElement('div');
border.className = "AutoFill_border";
appender.appendChild( border );
this.dom.borderRight = border;
border = document.createElement('div');
border.className = "AutoFill_border";
appender.appendChild( border );
this.dom.borderBottom = border;
border = document.createElement('div');
border.className = "AutoFill_border";
appender.appendChild( border );
this.dom.borderLeft = border;
/*
* Events
*/
$(filler).mousedown( function (e) {
this.onselectstart = function() { return false; };
that._fnFillerDragStart.call( that, e );
return false;
} );
$('tbody>tr>td', this.dom.table).live( 'mouseover mouseout', function (e) {
that._fnFillerDisplay.call( that, e );
} );
},
"_fnColumnDefs": function ( aoColumnDefs )
{
var
i, j, k, iLen, jLen, kLen,
aTargets;
/* Loop over the column defs array - loop in reverse so first instace has priority */
for ( i=aoColumnDefs.length-1 ; i>=0 ; i-- )
{
/* Each column def can target multiple columns, as it is an array */
aTargets = aoColumnDefs[i].aTargets;
for ( j=0, jLen=aTargets.length ; j<jLen ; j++ )
{
if ( typeof aTargets[j] == 'number' && aTargets[j] >= 0 )
{
/* 0+ integer, left to right column counting. */
this._fnColumnOptions( aTargets[j], aoColumnDefs[i] );
}
else if ( typeof aTargets[j] == 'number' && aTargets[j] < 0 )
{
/* Negative integer, right to left column counting */
this._fnColumnOptions( this.s.dt.aoColumns.length+aTargets[j], aoColumnDefs[i] );
}
else if ( typeof aTargets[j] == 'string' )
{
/* Class name matching on TH element */
for ( k=0, kLen=this.s.dt.aoColumns.length ; k<kLen ; k++ )
{
if ( aTargets[j] == "_all" ||
this.s.dt.aoColumns[k].nTh.className.indexOf( aTargets[j] ) != -1 )
{
this._fnColumnOptions( k, aoColumnDefs[i] );
}
}
}
}
}
},
"_fnColumnsAll": function ( aoColumns )
{
for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
{
this._fnColumnOptions( i, aoColumns[i] );
}
},
"_fnAddColumn": function ( i )
{
this.s.columns[i] = {
"enable": true,
"read": this._fnReadCell,
"write": this._fnWriteCell,
"step": this._fnStep,
"complete": null
};
},
"_fnColumnOptions": function ( i, opts )
{
if ( typeof opts.bEnable != 'undefined' )
{
this.s.columns[i].enable = opts.bEnable;
}
if ( typeof opts.fnRead != 'undefined' )
{
this.s.columns[i].read = opts.fnRead;
}
if ( typeof opts.fnWrite != 'undefined' )
{
this.s.columns[i].write = opts.fnWrite;
}
if ( typeof opts.fnStep != 'undefined' )
{
this.s.columns[i].step = opts.fnStep;
}
if ( typeof opts.fnCallback != 'undefined' )
{
this.s.columns[i].complete = opts.fnCallback;
}
},
/**
* Find out the coordinates of a given TD cell in a table
* @method _fnTargetCoords
* @param {Node} nTd
* @returns {Object} x and y properties, for the position of the cell in the tables DOM
*/
"_fnTargetCoords": function ( nTd )
{
var nTr = $(nTd).parents('tr')[0];
return {
"x": $('td', nTr).index(nTd),
"y": $('tr', nTr.parentNode).index(nTr)
};
},
/**
* Display the border around one or more cells (from start to end)
* @method _fnUpdateBorder
* @param {Node} nStart Starting cell
* @param {Node} nEnd Ending cell
* @returns void
*/
"_fnUpdateBorder": function ( nStart, nEnd )
{
var
border = this.s.border.width,
offsetStart = $(nStart).offset(),
offsetEnd = $(nEnd).offset(),
x1 = offsetStart.left - border,
x2 = offsetEnd.left + $(nEnd).outerWidth(),
y1 = offsetStart.top - border,
y2 = offsetEnd.top + $(nEnd).outerHeight(),
width = offsetEnd.left + $(nEnd).outerWidth() - offsetStart.left + (2*border),
height = offsetEnd.top + $(nEnd).outerHeight() - offsetStart.top + (2*border),
oStyle;
if ( this.s.dt.oScroll.sY !== "" )
{
/* The border elements are inside the DT scroller - so position relative to that */
var
offsetScroll = $(this.s.dt.nTable.parentNode).offset(),
scrollTop = $(this.s.dt.nTable.parentNode).scrollTop(),
scrollLeft = $(this.s.dt.nTable.parentNode).scrollLeft();
x1 -= offsetScroll.left - scrollLeft;
x2 -= offsetScroll.left - scrollLeft;
y1 -= offsetScroll.top - scrollTop;
y2 -= offsetScroll.top - scrollTop;
}
/* Top */
oStyle = this.dom.borderTop.style;
oStyle.top = y1+"px";
oStyle.left = x1+"px";
oStyle.height = this.s.border.width+"px";
oStyle.width = width+"px";
/* Bottom */
oStyle = this.dom.borderBottom.style;
oStyle.top = y2+"px";
oStyle.left = x1+"px";
oStyle.height = this.s.border.width+"px";
oStyle.width = width+"px";
/* Left */
oStyle = this.dom.borderLeft.style;
oStyle.top = y1+"px";
oStyle.left = x1+"px";
oStyle.height = height+"px";
oStyle.width = this.s.border.width+"px";
/* Right */
oStyle = this.dom.borderRight.style;
oStyle.top = y1+"px";
oStyle.left = x2+"px";
oStyle.height = height+"px";
oStyle.width = this.s.border.width+"px";
},
/**
* Mouse down event handler for starting a drag
* @method _fnFillerDragStart
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDragStart": function (e)
{
var that = this;
var startingTd = this.dom.currentTarget;
this.s.drag.dragging = true;
that.dom.borderTop.style.display = "block";
that.dom.borderRight.style.display = "block";
that.dom.borderBottom.style.display = "block";
that.dom.borderLeft.style.display = "block";
var coords = this._fnTargetCoords( startingTd );
this.s.drag.startX = coords.x;
this.s.drag.startY = coords.y;
this.s.drag.startTd = startingTd;
this.s.drag.endTd = startingTd;
this._fnUpdateBorder( startingTd, startingTd );
$(document).bind('mousemove.AutoFill', function (e) {
that._fnFillerDragMove.call( that, e );
} );
$(document).bind('mouseup.AutoFill', function (e) {
that._fnFillerFinish.call( that, e );
} );
/* Scrolling information cache */
this.s.screen.y = e.pageY;
this.s.screen.height = $(window).height();
this.s.screen.scrollTop = $(document).scrollTop();
if ( this.s.dt.oScroll.sY !== "" )
{
this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
}
/* Scrolling handler - we set an interval (which is cancelled on mouse up) which will fire
* regularly and see if we need to do any scrolling
*/
this.s.screen.interval = setInterval( function () {
var iScrollTop = $(document).scrollTop();
var iScrollDelta = iScrollTop - that.s.screen.scrollTop;
that.s.screen.y += iScrollDelta;
if ( that.s.screen.height - that.s.screen.y + iScrollTop < 50 )
{
$('html, body').animate( {
"scrollTop": iScrollTop + 50
}, 240, 'linear' );
}
else if ( that.s.screen.y - iScrollTop < 50 )
{
$('html, body').animate( {
"scrollTop": iScrollTop - 50
}, 240, 'linear' );
}
if ( that.s.dt.oScroll.sY !== "" )
{
if ( that.s.screen.y > that.s.scroller.bottom - 50 )
{
$(that.s.dt.nTable.parentNode).animate( {
"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() + 50
}, 240, 'linear' );
}
else if ( that.s.screen.y < that.s.scroller.top + 50 )
{
$(that.s.dt.nTable.parentNode).animate( {
"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() - 50
}, 240, 'linear' );
}
}
}, 250 );
},
/**
* Mouse move event handler for during a move. See if we want to update the display based on the
* new cursor position
* @method _fnFillerDragMove
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDragMove": function (e)
{
if ( e.target && e.target.nodeName.toUpperCase() == "TD" &&
e.target != this.s.drag.endTd )
{
var coords = this._fnTargetCoords( e.target );
if ( coords.x != this.s.drag.startX )
{
e.target = $('tbody>tr:eq('+coords.y+')>td:eq('+this.s.drag.startX+')', this.dom.table)[0];
coords = this._fnTargetCoords( e.target );
}
if ( coords.x == this.s.drag.startX )
{
var drag = this.s.drag;
drag.endTd = e.target;
if ( coords.y >= this.s.drag.startY )
{
this._fnUpdateBorder( drag.startTd, drag.endTd );
}
else
{
this._fnUpdateBorder( drag.endTd, drag.startTd );
}
this._fnFillerPosition( e.target );
}
}
/* Update the screen information so we can perform scrolling */
this.s.screen.y = e.pageY;
this.s.screen.scrollTop = $(document).scrollTop();
if ( this.s.dt.oScroll.sY !== "" )
{
this.s.scroller.scrollTop = $(this.s.dt.nTable.parentNode).scrollTop();
this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
}
},
/**
* Mouse release handler - end the drag and take action to update the cells with the needed values
* @method _fnFillerFinish
* @param {Object} e Event object
* @returns void
*/
"_fnFillerFinish": function (e)
{
var that = this;
$(document).unbind('mousemove.AutoFill');
$(document).unbind('mouseup.AutoFill');
this.dom.borderTop.style.display = "none";
this.dom.borderRight.style.display = "none";
this.dom.borderBottom.style.display = "none";
this.dom.borderLeft.style.display = "none";
this.s.drag.dragging = false;
clearInterval( this.s.screen.interval );
var coordsStart = this._fnTargetCoords( this.s.drag.startTd );
var coordsEnd = this._fnTargetCoords( this.s.drag.endTd );
var aTds = [];
var bIncrement;
if ( coordsStart.y <= coordsEnd.y )
{
bIncrement = true;
for ( i=coordsStart.y ; i<=coordsEnd.y ; i++ )
{
aTds.push( $('tbody>tr:eq('+i+')>td:eq('+coordsStart.x+')', this.dom.table)[0] );
}
}
else
{
bIncrement = false;
for ( i=coordsStart.y ; i>=coordsEnd.y ; i-- )
{
aTds.push( $('tbody>tr:eq('+i+')>td:eq('+coordsStart.x+')', this.dom.table)[0] );
}
}
var iColumn = coordsStart.x;
var bLast = false;
var aoEdited = [];
var sStart = this.s.columns[iColumn].read.call( this, this.s.drag.startTd );
var oPrepped = this._fnPrep( sStart );
for ( i=0, iLen=aTds.length ; i<iLen ; i++ )
{
if ( i==iLen-1 )
{
bLast = true;
}
var original = this.s.columns[iColumn].read.call( this, aTds[i] );
var step = this.s.columns[iColumn].step.call( this, aTds[i], oPrepped, i, bIncrement,
'SPRYMEDIA_AUTOFILL_STEPPER' );
this.s.columns[iColumn].write.call( this, aTds[i], step, bLast );
aoEdited.push( {
"td": aTds[i],
"newValue": step,
"oldValue": original
} );
}
if ( this.s.columns[iColumn].complete !== null )
{
this.s.columns[iColumn].complete.call( this, aoEdited );
}
},
/**
* Chunk a string such that it can be filled in by the stepper function
* @method _fnPrep
* @param {String} sStr String to prep
* @returns {Object} with parameters, iStart, sStr and sPostFix
*/
"_fnPrep": function ( sStr )
{
var aMatch = sStr.match(/[\d\.]+/g);
if ( !aMatch || aMatch.length === 0 )
{
return {
"iStart": 0,
"sStr": sStr,
"sPostFix": ""
};
}
var sLast = aMatch[ aMatch.length-1 ];
var num = parseInt(sLast, 10);
var regex = new RegExp( '^(.*)'+sLast+'(.*?)$' );
var decimal = sLast.match(/\./) ? "."+sLast.split('.')[1] : "";
return {
"iStart": num,
"sStr": sStr.replace(regex, "$1SPRYMEDIA_AUTOFILL_STEPPER$2"),
"sPostFix": decimal
};
},
/**
* Render a string for it's position in the table after the drag (incrememt numbers)
* @method _fnStep
* @param {Node} nTd Cell being written to
* @param {Object} oPrepped Prepared object for the stepper (from _fnPrep)
* @param {Int} iDiff Step difference
* @param {Boolean} bIncrement Increment (true) or decriment (false)
* @param {String} sToken Token to replace
* @returns {String} Rendered information
*/
"_fnStep": function ( nTd, oPrepped, iDiff, bIncrement, sToken )
{
var iReplace = bIncrement ? (oPrepped.iStart+iDiff) : (oPrepped.iStart-iDiff);
if ( isNaN(iReplace) )
{
iReplace = "";
}
return oPrepped.sStr.replace( sToken, iReplace+oPrepped.sPostFix );
},
/**
* Read informaiton from a cell, possibly using live DOM elements if suitable
* @method _fnReadCell
* @param {Node} nTd Cell to read
* @returns {String} Read value
*/
"_fnReadCell": function ( nTd )
{
var jq = $('input', nTd);
if ( jq.length > 0 )
{
return $(jq).val();
}
jq = $('select', nTd);
if ( jq.length > 0 )
{
return $(jq).val();
}
return nTd.innerHTML;
},
/**
* Write informaiton to a cell, possibly using live DOM elements if suitable
* @method _fnWriteCell
* @param {Node} nTd Cell to write
* @param {String} sVal Value to write
* @param {Boolean} bLast Flag to show if this is that last update
* @returns void
*/
"_fnWriteCell": function ( nTd, sVal, bLast )
{
var jq = $('input', nTd);
if ( jq.length > 0 )
{
$(jq).val( sVal );
return;
}
jq = $('select', nTd);
if ( jq.length > 0 )
{
$(jq).val( sVal );
return;
}
var pos = this.s.dt.oInstance.fnGetPosition( nTd );
this.s.dt.oInstance.fnUpdate( sVal, pos[0], pos[2], bLast );
},
/**
* Display the drag handle on mouse over cell
* @method _fnFillerDisplay
* @param {Object} e Event object
* @returns void
*/
"_fnFillerDisplay": function (e)
{
/* Don't display automatically when dragging */
if ( this.s.drag.dragging)
{
return;
}
/* Check that we are allowed to AutoFill this column or not */
var nTd = (e.target.nodeName.toLowerCase() == 'td') ? e.target : $(e.target).parents('td')[0];
var iX = this._fnTargetCoords(nTd).x;
if ( !this.s.columns[iX].enable )
{
return;
}
var filler = this.dom.filler;
if (e.type == 'mouseover')
{
this.dom.currentTarget = nTd;
this._fnFillerPosition( nTd );
filler.style.display = "block";
}
else if ( !e.relatedTarget || !e.relatedTarget.className.match(/AutoFill/) )
{
filler.style.display = "none";
}
},
/**
* Position the filler icon over a cell
* @method _fnFillerPosition
* @param {Node} nTd Cell to position filler icon over
* @returns void
*/
"_fnFillerPosition": function ( nTd )
{
var offset = $(nTd).offset();
var filler = this.dom.filler;
filler.style.top = (offset.top - (this.s.filler.height / 2)-1 + $(nTd).outerHeight())+"px";
filler.style.left = (offset.left - (this.s.filler.width / 2)-1 + $(nTd).outerWidth())+"px";
}
};
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Constants
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Name of this class
* @constant CLASS
* @type String
* @default AutoFill
*/
AutoFill.prototype.CLASS = "AutoFill";
/**
* AutoFill version
* @constant VERSION
* @type String
* @default 1.1.2
*/
AutoFill.VERSION = "1.1.2";
AutoFill.prototype.VERSION = AutoFill.VERSION;
})(jQuery);

View File

@@ -0,0 +1,33 @@
/*
* File: AutoFill.min.js
* Version: 1.1.2
* Author: Allan Jardine (www.sprymedia.co.uk)
*
* Copyright 2010-2011 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 AutoFill;
(function(e){AutoFill=function(b,a){if(!this.CLASS||"AutoFill"!=this.CLASS)alert("Warning: AutoFill must be initialised with the keyword 'new'");else{if(e.fn.dataTableExt.fnVersionCheck("1.7.0"))return this.s={filler:{height:0,width:0},border:{width:2},drag:{startX:-1,startY:-1,startTd:null,endTd:null,dragging:!1},screen:{interval:null,y:0,height:0,scrollTop:0},scroller:{top:0,bottom:0},columns:[]},this.dom={table:null,filler:null,borderTop:null,borderRight:null,borderBottom:null,borderLeft:null,currentTarget:null},
this.fnSettings=function(){return this.s},this._fnInit(b,a),this;alert("Warning: AutoFill requires DataTables 1.7 or greater - www.datatables.net/download")}};AutoFill.prototype={_fnInit:function(b,a){var c=this,d,f;this.s.dt=b.fnSettings();this.dom.table=this.s.dt.nTable;d=0;for(f=this.s.dt.aoColumns.length;d<f;d++)this._fnAddColumn(d);"undefined"!=typeof a&&"undefined"!=typeof a.aoColumnDefs&&this._fnColumnDefs(a.aoColumnDefs);"undefined"!=typeof a&&"undefined"!=typeof a.aoColumns&&this._fnColumnsAll(a.aoColumns);
d=document.createElement("div");d.className="AutoFill_filler";document.body.appendChild(d);this.dom.filler=d;d.style.display="block";this.s.filler.height=e(d).height();this.s.filler.width=e(d).width();d.style.display="none";var g=document.body;""!==c.s.dt.oScroll.sY&&(c.s.dt.nTable.parentNode.style.position="relative",g=c.s.dt.nTable.parentNode);f=document.createElement("div");f.className="AutoFill_border";g.appendChild(f);this.dom.borderTop=f;f=document.createElement("div");f.className="AutoFill_border";
g.appendChild(f);this.dom.borderRight=f;f=document.createElement("div");f.className="AutoFill_border";g.appendChild(f);this.dom.borderBottom=f;f=document.createElement("div");f.className="AutoFill_border";g.appendChild(f);this.dom.borderLeft=f;e(d).mousedown(function(a){this.onselectstart=function(){return false};c._fnFillerDragStart.call(c,a);return false});e("tbody>tr>td",this.dom.table).live("mouseover mouseout",function(a){c._fnFillerDisplay.call(c,a)})},_fnColumnDefs:function(b){var a,c,d,e,
g,h;for(a=b.length-1;0<=a;a--){h=b[a].aTargets;c=0;for(e=h.length;c<e;c++)if("number"==typeof h[c]&&0<=h[c])this._fnColumnOptions(h[c],b[a]);else if("number"==typeof h[c]&&0>h[c])this._fnColumnOptions(this.s.dt.aoColumns.length+h[c],b[a]);else if("string"==typeof h[c]){d=0;for(g=this.s.dt.aoColumns.length;d<g;d++)("_all"==h[c]||-1!=this.s.dt.aoColumns[d].nTh.className.indexOf(h[c]))&&this._fnColumnOptions(d,b[a])}}},_fnColumnsAll:function(b){for(var a=0,c=this.s.dt.aoColumns.length;a<c;a++)this._fnColumnOptions(a,
b[a])},_fnAddColumn:function(b){this.s.columns[b]={enable:!0,read:this._fnReadCell,write:this._fnWriteCell,step:this._fnStep,complete:null}},_fnColumnOptions:function(b,a){"undefined"!=typeof a.bEnable&&(this.s.columns[b].enable=a.bEnable);"undefined"!=typeof a.fnRead&&(this.s.columns[b].read=a.fnRead);"undefined"!=typeof a.fnWrite&&(this.s.columns[b].write=a.fnWrite);"undefined"!=typeof a.fnStep&&(this.s.columns[b].step=a.fnStep);"undefined"!=typeof a.fnCallback&&(this.s.columns[b].complete=a.fnCallback)},
_fnTargetCoords:function(b){var a=e(b).parents("tr")[0];return{x:e("td",a).index(b),y:e("tr",a.parentNode).index(a)}},_fnUpdateBorder:function(b,a){var c=this.s.border.width,d=e(b).offset(),f=e(a).offset(),g=d.left-c,h=f.left+e(a).outerWidth(),j=d.top-c,k=f.top+e(a).outerHeight(),l=f.left+e(a).outerWidth()-d.left+2*c,c=f.top+e(a).outerHeight()-d.top+2*c;if(""!==this.s.dt.oScroll.sY)var d=e(this.s.dt.nTable.parentNode).offset(),f=e(this.s.dt.nTable.parentNode).scrollTop(),m=e(this.s.dt.nTable.parentNode).scrollLeft(),
g=g-(d.left-m),h=h-(d.left-m),j=j-(d.top-f),k=k-(d.top-f);d=this.dom.borderTop.style;d.top=j+"px";d.left=g+"px";d.height=this.s.border.width+"px";d.width=l+"px";d=this.dom.borderBottom.style;d.top=k+"px";d.left=g+"px";d.height=this.s.border.width+"px";d.width=l+"px";d=this.dom.borderLeft.style;d.top=j+"px";d.left=g+"px";d.height=c+"px";d.width=this.s.border.width+"px";d=this.dom.borderRight.style;d.top=j+"px";d.left=h+"px";d.height=c+"px";d.width=this.s.border.width+"px"},_fnFillerDragStart:function(b){var a=
this,c=this.dom.currentTarget;this.s.drag.dragging=!0;a.dom.borderTop.style.display="block";a.dom.borderRight.style.display="block";a.dom.borderBottom.style.display="block";a.dom.borderLeft.style.display="block";var d=this._fnTargetCoords(c);this.s.drag.startX=d.x;this.s.drag.startY=d.y;this.s.drag.startTd=c;this.s.drag.endTd=c;this._fnUpdateBorder(c,c);e(document).bind("mousemove.AutoFill",function(b){a._fnFillerDragMove.call(a,b)});e(document).bind("mouseup.AutoFill",function(b){a._fnFillerFinish.call(a,
b)});this.s.screen.y=b.pageY;this.s.screen.height=e(window).height();this.s.screen.scrollTop=e(document).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.top=e(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=this.s.scroller.top+e(this.s.dt.nTable.parentNode).height());this.s.screen.interval=setInterval(function(){var b=e(document).scrollTop();a.s.screen.y=a.s.screen.y+(b-a.s.screen.scrollTop);a.s.screen.height-a.s.screen.y+b<50?e("html, body").animate({scrollTop:b+50},240,
"linear"):a.s.screen.y-b<50&&e("html, body").animate({scrollTop:b-50},240,"linear");a.s.dt.oScroll.sY!==""&&(a.s.screen.y>a.s.scroller.bottom-50?e(a.s.dt.nTable.parentNode).animate({scrollTop:e(a.s.dt.nTable.parentNode).scrollTop()+50},240,"linear"):a.s.screen.y<a.s.scroller.top+50&&e(a.s.dt.nTable.parentNode).animate({scrollTop:e(a.s.dt.nTable.parentNode).scrollTop()-50},240,"linear"))},250)},_fnFillerDragMove:function(b){if(b.target&&"TD"==b.target.nodeName.toUpperCase()&&b.target!=this.s.drag.endTd){var a=
this._fnTargetCoords(b.target);a.x!=this.s.drag.startX&&(b.target=e("tbody>tr:eq("+a.y+")>td:eq("+this.s.drag.startX+")",this.dom.table)[0],a=this._fnTargetCoords(b.target));if(a.x==this.s.drag.startX){var c=this.s.drag;c.endTd=b.target;a.y>=this.s.drag.startY?this._fnUpdateBorder(c.startTd,c.endTd):this._fnUpdateBorder(c.endTd,c.startTd);this._fnFillerPosition(b.target)}}this.s.screen.y=b.pageY;this.s.screen.scrollTop=e(document).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.scrollTop=
e(this.s.dt.nTable.parentNode).scrollTop(),this.s.scroller.top=e(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=this.s.scroller.top+e(this.s.dt.nTable.parentNode).height())},_fnFillerFinish:function(){e(document).unbind("mousemove.AutoFill");e(document).unbind("mouseup.AutoFill");this.dom.borderTop.style.display="none";this.dom.borderRight.style.display="none";this.dom.borderBottom.style.display="none";this.dom.borderLeft.style.display="none";this.s.drag.dragging=!1;clearInterval(this.s.screen.interval);
var b=this._fnTargetCoords(this.s.drag.startTd),a=this._fnTargetCoords(this.s.drag.endTd),c=[],d;if(b.y<=a.y){d=!0;for(i=b.y;i<=a.y;i++)c.push(e("tbody>tr:eq("+i+")>td:eq("+b.x+")",this.dom.table)[0])}else{d=!1;for(i=b.y;i>=a.y;i--)c.push(e("tbody>tr:eq("+i+")>td:eq("+b.x+")",this.dom.table)[0])}var b=b.x,a=!1,f=[],g=this.s.columns[b].read.call(this,this.s.drag.startTd),g=this._fnPrep(g);i=0;for(iLen=c.length;i<iLen;i++){i==iLen-1&&(a=!0);var h=this.s.columns[b].read.call(this,c[i]),j=this.s.columns[b].step.call(this,
c[i],g,i,d,"SPRYMEDIA_AUTOFILL_STEPPER");this.s.columns[b].write.call(this,c[i],j,a);f.push({td:c[i],newValue:j,oldValue:h})}null!==this.s.columns[b].complete&&this.s.columns[b].complete.call(this,f)},_fnPrep:function(b){var a=b.match(/[\d\.]+/g);if(!a||0===a.length)return{iStart:0,sStr:b,sPostFix:""};var c=a[a.length-1],a=parseInt(c,10),d=RegExp("^(.*)"+c+"(.*?)$"),c=c.match(/\./)?"."+c.split(".")[1]:"";return{iStart:a,sStr:b.replace(d,"$1SPRYMEDIA_AUTOFILL_STEPPER$2"),sPostFix:c}},_fnStep:function(b,
a,c,d,e){b=d?a.iStart+c:a.iStart-c;isNaN(b)&&(b="");return a.sStr.replace(e,b+a.sPostFix)},_fnReadCell:function(b){var a=e("input",b);if(0<a.length)return e(a).val();a=e("select",b);return 0<a.length?e(a).val():b.innerHTML},_fnWriteCell:function(b,a,c){var d=e("input",b);0<d.length?e(d).val(a):(d=e("select",b),0<d.length?e(d).val(a):(b=this.s.dt.oInstance.fnGetPosition(b),this.s.dt.oInstance.fnUpdate(a,b[0],b[2],c)))},_fnFillerDisplay:function(b){if(!this.s.drag.dragging){var a="td"==b.target.nodeName.toLowerCase()?
b.target:e(b.target).parents("td")[0],c=this._fnTargetCoords(a).x;if(this.s.columns[c].enable)if(c=this.dom.filler,"mouseover"==b.type)this.dom.currentTarget=a,this._fnFillerPosition(a),c.style.display="block";else if(!b.relatedTarget||!b.relatedTarget.className.match(/AutoFill/))c.style.display="none"}},_fnFillerPosition:function(b){var a=e(b).offset(),c=this.dom.filler;c.style.top=a.top-this.s.filler.height/2-1+e(b).outerHeight()+"px";c.style.left=a.left-this.s.filler.width/2-1+e(b).outerWidth()+
"px"}};AutoFill.prototype.CLASS="AutoFill";AutoFill.VERSION="1.1.2";AutoFill.prototype.VERSION=AutoFill.VERSION})(jQuery);

View File

@@ -0,0 +1,496 @@
<!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>AutoFill example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/AutoFill.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/AutoFill.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable({
"sScrollY": 200,
"bScrollCollapse": true,
"bPaginate": false
});
new AutoFill( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
AutoFill example with scrolling
</div>
<h1>Preamble</h1>
<p>
When dragging an AutoFill handle, the table (if DataTables scrolling is enabled) or the window will be automatically scrolled, as you approach the edge of the scrolling component. The example below shows the effect with DataTables scrolling (and also window if needed).
</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="columns.html">Selecting which columns to provide AutoFill on</a></li>
<li><a href="scrolling.html">Scrolling a DataTable using fill</a></li>
<li><a href="inputs.html">Using with input elements</a></li>
<li><a href="callbacks.html">Customisation using callback functions</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable({
"sScrollY": 200,
"bScrollCollapse": true,
"bPaginate": false
});
new AutoFill( oTable );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
AutoFill and DataTables &copy; Allan Jardine 2009-2010.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,495 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip'
} );
} );
</script>
</head>
<body id="dt_example" class="alt">
<div id="container">
<div class="full_width big">
ColReorder example with alternative insert styling
</div>
<h1>Preamble</h1>
<p>Using CSS it is relatively easy to modify the insert bar to suit your web-site. This
example shows how an arrow can be used to show the insert point rather than the straight
bar used in the other examples.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip'
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,588 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.css";
@import "../ColVis/media/css/ColVis.css";
thead input { width: 100% }
input.search_init { color: #999 }
</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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8" src="../ColVis/media/js/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable;
/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
oTable = $('#example').dataTable( {
"sDom": 'RC<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
},
"bSortCellsTop": true
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with individual column filtering
</div>
<h1>Preamble</h1>
<p>This example of how to use ColReorder shows quite a number of different interesting
properties. Firstly, there is integration with ColVis, then there is the fact that there
is more than one row in the table header with the second being used for the input
elements, and finally of course the filtering itself. Note that it is important to use
the _fnVisibleToColumnIndex() internal function to calculate which column index should
be given to fnFilter (or you could employ your own methods).</p>
<p>Please note that this demo requires DataTables 1.8 or later.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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>
<tr>
<td><input type="text" name="search_engine" value="Search engines" class="search_init" /></td>
<td><input type="text" name="search_browser" value="Search browsers" class="search_init" /></td>
<td><input type="text" name="search_platform" value="Search platforms" class="search_init" /></td>
<td><input type="text" name="search_version" value="Search versions" class="search_init" /></td>
<td><input type="text" name="search_grade" value="Search grades" class="search_init" /></td>
</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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
var oTable;
/* Add the events etc before DataTables hides a column */
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("thead input").index(this) ) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
oTable = $('#example').dataTable( {
"sDom": 'RC&lt;"clear"&gt;lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
},
"bSortCellsTop": true
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.css";
@import "../ColVis/media/css/ColVis.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8" src="../ColVis/media/js/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'RC<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 1 ] }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with ColVis
</div>
<h1>Preamble</h1>
<p>The ColReorder plug-in interacts with the ColVis plug-in for DataTables by updating the
order of the list of columns whenever a reorder is done. This is shown in the example
below, where one column has been hidden by default to add extra emphasis to ColVis.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'RC&lt;"clear"&gt;lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 1 ] }
]
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,603 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.css";
.FixedColumns_Cloned th { background-color: white; }
td.index { background-color: white; border-right: 1px solid black; }
table.display th.sorting_disabled { border-bottom: 1px solid white; }
</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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8" src="../FixedColumns/media/js/FixedColumns.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered ) {
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ ) {
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"aoColumnDefs": [
{ "bSortable": false, "sClass": "index", "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]],
"oColReorder": {
"iFixedColumns": 1
}
} );
new FixedColumns( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with FixedColumns
</div>
<h1>Preamble</h1>
<p>While ColReorder works great with scrolling in DataTables (and thus FixedColumns),
it also presents an additional option called 'iFixedColumns' which allows you to not
let the user reorder certain columns (specific the number given, counting left to
right). So in the case of FixedColumns this is useful because you typically won't want
to let your fixed column be reordered. This is shown below in the FixedColumns index column
example.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table class="display" id="example">
<thead>
<tr>
<th width="3%">&nbsp;</th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td class="center">1</td>
<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="gradeC">
<td class="center">2</td>
<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="gradeA">
<td class="center">3</td>
<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="gradeA">
<td class="center">4</td>
<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="gradeA">
<td class="center">5</td>
<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="gradeA">
<td class="center">6</td>
<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="gradeA">
<td class="center">7</td>
<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 class="center">8</td>
<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 class="center">9</td>
<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 class="center">10</td>
<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 class="center">11</td>
<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 class="center">12</td>
<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 class="center">13</td>
<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 class="center">14</td>
<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 class="center">15</td>
<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 class="center">16</td>
<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 class="center">17</td>
<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 class="center">18</td>
<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 class="center">19</td>
<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 class="center">20</td>
<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 class="center">21</td>
<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 class="center">22</td>
<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 class="center">23</td>
<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 class="center">24</td>
<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 class="center">25</td>
<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 class="center">26</td>
<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="gradeA">
<td class="center">27</td>
<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="gradeA">
<td class="center">28</td>
<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="gradeA">
<td class="center">29</td>
<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="gradeA">
<td class="center">30</td>
<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="gradeA">
<td class="center">31</td>
<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="gradeA">
<td class="center">32</td>
<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="gradeA">
<td class="center">33</td>
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">34</td>
<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="gradeA">
<td class="center">35</td>
<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="gradeA">
<td class="center">36</td>
<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="gradeA">
<td class="center">37</td>
<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="gradeA">
<td class="center">38</td>
<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="gradeA">
<td class="center">39</td>
<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="gradeA">
<td class="center">40</td>
<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="gradeA">
<td class="center">41</td>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">42</td>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td class="center">43</td>
<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="gradeC">
<td class="center">44</td>
<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="gradeA">
<td class="center">45</td>
<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="gradeA">
<td class="center">46</td>
<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="gradeX">
<td class="center">47</td>
<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="gradeC">
<td class="center">48</td>
<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="gradeC">
<td class="center">49</td>
<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="gradeA">
<td class="center">50</td>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td class="center">51</td>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td class="center">52</td>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td class="center">53</td>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td class="center">54</td>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td class="center">55</td>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td class="center">56</td>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td class="center">57</td>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>&nbsp;</th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered ) {
for ( var i=0, iLen=oSettings.aiDisplay.length ; i&lt;iLen ; i++ ) {
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"aoColumnDefs": [
{ "bSortable": false, "sClass": "index", "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]],
"oColReorder": {
"iFixedColumns": 1
}
} );
new FixedColumns( oTable );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.css";
.FixedHeader_Cloned th { background-color: white; }
</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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8" src="../FixedHeader/js/FixedHeader.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'RC<"clear">lfrtip'
} );
new FixedHeader( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with FixedHeader
</div>
<h1>Preamble</h1>
<p>FixedHeader is a particularly useful plug-in for DataTables, allowing a table header
to float at the top of a scrolling window. ColReorder works well with FixedHeader, allowing
you to reorder columns even using the floating header, as shown in the example below.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'RC&lt;"clear"&gt;lfrtip'
} );
new FixedHeader( oTable );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,496 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip'
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example
</div>
<h1>Preamble</h1>
<p>This example shows the basic use case of the ColReorder plug-in. With ColReorder enabled
for a table, the user has the ability to click and drag any table header cell, and drop
it where they wish the column to be inserted. The insert point is shown visually, and
the column reordering is done as soon as the mouse button is released.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip'
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,21 @@
/*
* Namespace DTCR - "DataTables ColReorder" plug-in
*/
table.DTCR_clonedTable {
background-color: white;
z-index: 202;
}
div.DTCR_pointer {
width: 1px;
background-color: #0259C4;
z-index: 201;
}
body.alt div.DTCR_pointer {
margin-top: -15px;
margin-left: -9px;
width: 18px;
background: url('../images/insert.png') no-repeat top left;
}

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Settings object which contains customisable information for ColReorder instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Settings object which contains customisable information for ColReorder instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Information used for the mouse drag - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Information used for the mouse drag</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,163 @@
<!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">
<title>Class: ColReorder - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Class: ColReorder</h1>
<p class="class-description"><p>ColReorder</p></p>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td>Methods (0)</td><td><a href="#summary_methods_static">Static methods (1)</a></td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td>Methods (0)</td><td><a href="#summary_methods_static">Static methods (1)</a></td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl><dt id="ColReorder" class=" even"><a name="ColReorder"></a><a name="ColReorder_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new ColReorder</a></span><span class="type-sig"><span class="signature">(DataTables, ColReorder)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>ColReorder provides column visiblity control for DataTables</p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">DataTables</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>settings object</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">ColReorder</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>options</p></td></tr>
</tbody>
</table></div>
</dl>
</div>
<div class="doc_summary">
<a name="summary"></a>
<h2>Summary</h2>
<div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoInstances">aoInstances</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Array of all ColReorder instances for later reference</p></dd>
</dl></div><div class="doc_group"><a name="summary_methods_static"></a><h3 class="subsection-title">Methods - static</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnReset">fnReset</a></span><span class="type-sig"><span class="signature">(object)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Reset the column ordering for a DataTables instance</p></dd>
</dl>
</div>
</div>
<div class="doc_details">
<a name="details"></a>
<h2>Details</h2>
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
<dl>
<dt class=" even"><a name="aoInstances"></a><a name="aoInstances_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aoInstances">aoInstances</a></span><span class="type-sig"><span class="type-signature"> :array</span></span></dt><dd class=" even"><p>Array of all ColReorder instances for later reference</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Properties:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">ColReorder.aoInstances</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr>
</tbody>
</table></div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - static</h3>
<dl>
<dt id="ColReorder.fnReset" class=" even"><a name="fnReset"></a><a name="fnReset_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnReset</a></span><span class="type-sig"><span class="signature">(object)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Reset the column ordering for a DataTables instance</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">object</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>oTable DataTables instance to consider</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
</dd>
</div>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Common and useful DOM elements for the class instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Common and useful DOM elements for the class instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,180 @@
<!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">
<title>Global - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Global</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_classes">Classes (1)</a></td><td>Namespaces (0)</td></tr><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (3)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (3)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
<div class="doc_summary">
<a name="summary"></a>
<h2>Summary</h2>
<div class="doc_group"><a name="summary_classes"></a><h3 class="subsection-title">Classes</h3>
<dl>
<dt class="even"><span class="type-name"><a href="ColReorder.html">ColReorder</a></span></dt><dd class="even"><p>ColReorder provides column visiblity control for DataTables</p></dd>
</dl></div><div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>ColReorder version</p></dd>
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnArraySwitch">fnArraySwitch</a></span><span class="type-sig"><span class="signature">(array, int, int)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Modify an array by switching the position of two elements</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnDomSwitch">fnDomSwitch</a></span><span class="type-sig"><span class="signature">(string, int, int)</span><span class="type-signature"></span></span></dt><dd class=" odd"><p>Switch the positions of nodes in a parent node (note this is specifically designed for
table rows). Note this function considers all element nodes under the parent!</p></dd><dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnInvertKeyValues">fnInvertKeyValues</a></span><span class="type-sig"><span class="signature">(array)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Switch the key value pairing of an index array to be value key (i.e. the old value is now the
key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ].</p></dd>
</dl>
</div>
</div>
<div class="doc_details">
<a name="details"></a>
<h2>Details</h2>
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><a name="CLASS"></a><a name="CLASS_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd><dt class=" odd"><a name="VERSION"></a><a name="VERSION_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>ColReorder version</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt id="fnArraySwitch" class=" even"><a name="fnArraySwitch"></a><a name="fnArraySwitch_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnArraySwitch</a></span><span class="type-sig"><span class="signature">(array, int, int)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Modify an array by switching the position of two elements</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">array</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>aArray Array to consider, will be modified by reference (i.e. no return)</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">int</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>iFrom From point</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">int</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>iTo Insert point</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="fnDomSwitch" class=" odd"><a name="fnDomSwitch"></a><a name="fnDomSwitch_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnDomSwitch</a></span><span class="type-sig"><span class="signature">(string, int, int)</span><span class="type-signature"></span></span></span></dt><dd class=" odd"><p>Switch the positions of nodes in a parent node (note this is specifically designed for
table rows). Note this function considers all element nodes under the parent!</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">string</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>sTag Tag to consider</p></td></tr><tr class="odd"><td class="number right_border"><div>2</div></td><td class="name">int</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>iFrom Element to move</p></td></tr><tr class="even"><td class="number right_border"><div>3</div></td><td class="name">int</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>Point to element the element to (before this point), can be null for append</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
<dt id="fnInvertKeyValues" class=" even"><a name="fnInvertKeyValues"></a><a name="fnInvertKeyValues_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnInvertKeyValues</a></span><span class="type-sig"><span class="signature">(array)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Switch the key value pairing of an index array to be value key (i.e. the old value is now the
key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ].</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">array</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>aIn Array to switch around</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>array</p></p></div>
</dd>
</div>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!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">
<title>Table of Contents - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
</div>
<div class="fw_content">
<h3 class="subsection-title">Table of Contents</h3>
<dl>
<dt><a href="ColReorder.html">ColReorder</a></dt><dd><p>ColReorder provides column visiblity control for DataTables</p></dd>
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:28
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,393 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.12.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
html, body {
margin: 0;
padding: 0;
width: 100%;
font: 14px/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color: #111;
}
div.fw_container {
width: 980px;
padding-top: 2em;
margin: 0 auto;
}
div.fw_header {
position: relative;
}
div.fw_content {
padding-top: 2em;
}
div.fw_footer {
padding-top: 4em;
font-size: 75%;
text-align: center;
}
.type-attr .type-signature {
background-color: #ccc;
color: white;
border-radius: 3px;
display: inline-block;
padding: 0 3px;
font-size: 0.9em;
}
.type-attr {
float: right;
color: #999;
}
.type-name {
font-weight: bold;
}
.type-sig {
color: #999;
}
.type-param {
color: #D32929;
}
.type-return {
color: #FF8080;
}
.type-brace {
color: #111;
}
.example-code {
margin-left: 30px;
}
.example-code td.code {
border-top: 1px solid #4E6CA3 !important;
}
.type-augmented {
position: absolute;
left: 8px;
top: 0;
}
dt, dd {
padding: 0.4em 10px;
}
dt {
padding-bottom: 0 !important;
}
dd {
position: relative;
padding-top: 0 !important;
padding-left: 3em;
}
dt.even, dd.even {
background-color: white;
}
dt.odd, dd.odd {
background-color: #F2F2F2;
}
div.doc_overview dd, div.doc_overview dt {
padding-left: 0 !important;
}
.right_border div {
width: 20px;
padding: 2px 0.5em 2px 1em;
text-align: right;
}
.right_border {
border-right: 3px solid #4E6CA3;
}
.bottom_border {
border-bottom: 1px solid #4E6CA3;
}
a {
text-decoration: none;
color: #4E6CA3;
}
a:hover {
text-decoration: underline;
cursor: pointer;
*cursor: hand;
}
div.fw_content ul {
list-style-image: url('../images/arrow.png');
padding: 0 0 0 2em;
}
/*
h2 {
font-size: 1.4em;
margin-top: 2em;
border-bottom: 3px solid #829ac6;
padding-left: 5px;
}
h3 {
font-size: 1.2em;
margin-top: 1em;
border-bottom: 1px solid #A4B5D5;
padding-left: 5px;
}
*/
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
padding-top: 5px;
}
h2.ancestors {
font-size: 14px;
margin: 0;
}
h3 {
font-size: 1.3em;
padding-top: 5px;
margin-bottom: 5px;
}
h5 {
padding-top: 6px;
font-weight: bold;
font-size: 0.9em;
border-bottom: 1px solid #cad4e6;
margin-bottom: 1em;
}
div.doc_summary, div.doc_details {
margin-top: 2em;
clear: both;
}
div.doc_group {
margin-top: 1em;
border-top: 1px solid #A4B5D5;
border-left: 1px solid #A4B5D5;
padding-left: 10px;
}
div.extended {
margin-left: 30px;
}
table.params {
margin-left: 30px;
width: 97%;
}
table.params th,
table.params td {
padding: 3px;
}
tr.odd {
background-color: white;
}
tr.even {
background-color: #F8F8F8;
}
th.name,
td.name {
padding-left: 13px;
}
td.number {
background-color: white;
color: #5C5C5C;
}
dd.odd td.number {
background-color: #F2F2F2;
}
p {
margin: 1em 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
p.returns {
margin-left: 5%;
}
div.page-info {
position: absolute;
top: 0;
right: 0;
}
.private {
display: none;
}
code {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
padding: 2px 4px !important;
white-space: pre;
font-size: 0.9em;
color: #D14;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
padding: 6px 10px;
}
pre>code {
background-color: transparent;
border: none;
color: #111;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
ol {
list-style-type: decimal;
list-style-position: outside;
padding-left: 30px;
}
div.fw_nav {
position: fixed;
top: 25px;
right: 30px;
width: 250px;
border: 1px solid #A4B5D5;
background-color: white;
padding: 10px;
z-index: 1001;
font-size: 12px;
overflow: hidden;
}
div.fw_nav h2 {
margin: -10px 0 10px -10px;
width: 250px;
padding: 5px 10px;
background-color: #A4B5D5;
font-size: 12px;
cursor: pointer;
*cursor: hand;
}
div.fw_nav ul>li>div {
padding: 0 0 0 1em;
}
div.nav_blocker {
float: right;
}
div.fw_nav td {
color: #999;
}
div.fw_nav li {
margin-bottom: 5px;
}
div.fw_nav li>a {
font-weight: bold;
}
.css_clear {
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.css_right {
text-align: right;
}
.css_center {
text-align: center;
}
.css_spacing {
margin-top: 1.5em;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}

View File

@@ -0,0 +1,226 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 2px 0.5em 2px 1em !important;
}
.syntaxhighlighter table td.code .line {
padding: 2px 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
background: none !important;
}
.syntaxhighlighter.printing .line .number {
color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
color: black !important;
}
.syntaxhighlighter.printing .toolbar {
display: none !important;
}
.syntaxhighlighter.printing a {
text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
color: blue !important;
}
.syntaxhighlighter.printing .keyword {
color: #006699 !important;
font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
color: gray !important;
}
.syntaxhighlighter.printing .variable {
color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
color: black !important;
}

View File

@@ -0,0 +1,128 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter {
background-color: white !important;
font-size: 14px !important;
overflow: visible !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #F8F8F8 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: black !important;
}
.syntaxhighlighter table caption {
color: black !important;
}
.syntaxhighlighter .gutter {
}
.syntaxhighlighter .gutter div {
color: #5C5C5C !important;
width: 20px !important;
}
.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter .gutter .line.alt2 {
background-color: white !important;
}
.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter .gutter .line.alt2 {
background-color: #F2F2F2 !important;
}
.syntaxhighlighter .gutter .line {
border-right: 3px solid #4E6CA3 !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #4E6CA3 !important;
color: white !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
color: blue !important;
background: white !important;
border: 1px solid #4E6CA3 !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: red !important;
}
.syntaxhighlighter .toolbar {
color: white !important;
background: #4E6CA3 !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,121 @@
(function() {
var showingNav = true;
$(document).ready( function () {
var jqNav = $('div.fw_nav');
jqNav.css('right', ($(window).width() - $('div.fw_container').width()) /2);
var n = $('div.nav_blocker')[0];
n.style.height = $(jqNav).outerHeight()+"px";
n.style.width = ($(jqNav).outerWidth()+20)+"px";
SyntaxHighlighter.highlight();
$('#private_toggle').click( function () {
if ( $('input[name=show_private]').val() == 0 ) {
$('input[name=show_private]').val( 1 );
$('#private_label').html('Showing');
$('.private').css('display', 'block');
} else {
$('input[name=show_private]').val( 0 );
$('#private_label').html('Hiding');
$('.private').css('display', 'none');
}
fnWriteCookie();
return false;
} );
$('#extended_toggle').click( function () {
if ( $('input[name=show_extended]').val() == 0 ) {
$('input[name=show_extended]').val( 1 );
$('#extended_label').html('Showing');
$('.augmented').css('display', 'block');
} else {
$('input[name=show_extended]').val( 0 );
$('#extended_label').html('Hiding');
$('.augmented').css('display', 'none');
}
fnWriteCookie();
return false;
} );
var savedHeight = $(jqNav).height();
$('div.fw_nav h2').click( function () {
if ( showingNav ) {
$('div.fw_nav').animate( {
"height": 10,
"opacity": 0.3
} );
showingNav = false;
} else {
$('div.fw_nav').animate( {
"height": savedHeight,
"opacity": 1
} );
showingNav = true;
}
fnWriteCookie();
} );
var cookie = fnReadCookie( 'SpryMedia_JSDoc' );
if ( cookie != null ) {
var a = cookie.split('-');
if ( a[0] == 1 ) {
$('#private_toggle').click();
}
if ( a[1] == 0 ) {
$('#extended_toggle').click();
}
if ( a[2] == 'false' ) {
$('div.fw_nav').css('height', 10).css('opacity', 0.3);
showingNav = false;
}
}
} );
function fnWriteCookie()
{
var sVal =
$('input[name=show_private]').val()+'-'+
$('input[name=show_extended]').val()+'-'+
showingNav;
fnCreateCookie( 'SpryMedia_JSDoc', sVal );
}
function fnCreateCookie( sName, sValue )
{
var iDays = 365;
var date = new Date();
date.setTime( date.getTime()+(iDays*24*60*60*1000) );
var sExpires = "; expires="+date.toGMTString();
document.cookie = sName+"="+sValue+sExpires+"; path=/";
}
function fnReadCookie( sName )
{
var sNameEQ = sName + "=";
var sCookieContents = document.cookie.split(';');
for( var i=0 ; i<sCookieContents.length ; i++ ) {
var c = sCookieContents[i];
while (c.charAt(0)==' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(sNameEQ) == 0) {
return c.substring(sNameEQ.length,c.length);
}
}
return null;
}
})();

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,52 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
var keywords = 'break case catch continue ' +
'default delete do else false ' +
'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with'
;
var r = SyntaxHighlighter.regexLib;
this.regexList = [
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.forHtmlScript(r.scriptScriptTags);
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['js', 'jscript', 'javascript'];
SyntaxHighlighter.brushes.JScript = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,20 @@
Copyright (c) 2003, 2004 Jim Weirich
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -0,0 +1,982 @@
/*
* File: ColReorder.js
* Version: 1.0.8
* CVS: $Id$
* Description: Allow columns to be reordered in a DataTable
* Author: Allan Jardine (www.sprymedia.co.uk)
* Created: Wed Sep 15 18:23:29 BST 2010
* Modified: $Date$ by $Author$
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Project: DataTables
* Contact: www.sprymedia.co.uk/contact
*
* Copyright 2010-2011 Allan Jardine, all rights reserved.
*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, available at:
* http://datatables.net/license_gpl2
* http://datatables.net/license_bsd
*
*/
(function($, window, document) {
/**
* Switch the key value pairing of an index array to be value key (i.e. the old value is now the
* key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ].
* @method fnInvertKeyValues
* @param array aIn Array to switch around
* @returns array
*/
function fnInvertKeyValues( aIn )
{
var aRet=[];
for ( var i=0, iLen=aIn.length ; i<iLen ; i++ )
{
aRet[ aIn[i] ] = i;
}
return aRet;
}
/**
* Modify an array by switching the position of two elements
* @method fnArraySwitch
* @param array aArray Array to consider, will be modified by reference (i.e. no return)
* @param int iFrom From point
* @param int iTo Insert point
* @returns void
*/
function fnArraySwitch( aArray, iFrom, iTo )
{
var mStore = aArray.splice( iFrom, 1 )[0];
aArray.splice( iTo, 0, mStore );
}
/**
* Switch the positions of nodes in a parent node (note this is specifically designed for
* table rows). Note this function considers all element nodes under the parent!
* @method fnDomSwitch
* @param string sTag Tag to consider
* @param int iFrom Element to move
* @param int Point to element the element to (before this point), can be null for append
* @returns void
*/
function fnDomSwitch( nParent, iFrom, iTo )
{
var anTags = [];
for ( var i=0, iLen=nParent.childNodes.length ; i<iLen ; i++ )
{
if ( nParent.childNodes[i].nodeType == 1 )
{
anTags.push( nParent.childNodes[i] );
}
}
var nStore = anTags[ iFrom ];
if ( iTo !== null )
{
nParent.insertBefore( nStore, anTags[iTo] );
}
else
{
nParent.appendChild( nStore );
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables plug-in API functions
*
* This are required by ColReorder in order to perform the tasks required, and also keep this
* code portable, to be used for other column reordering projects with DataTables, if needed.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Plug-in for DataTables which will reorder the internal column structure by taking the column
* from one position (iFrom) and insert it into a given point (iTo).
* @method $.fn.dataTableExt.oApi.fnColReorder
* @param object oSettings DataTables settings object - automatically added by DataTables!
* @param int iFrom Take the column to be repositioned from this point
* @param int iTo and insert it into this point
* @returns void
*/
$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )
{
var i, iLen, j, jLen, iCols=oSettings.aoColumns.length, nTrs, oCol;
/* Sanity check in the input */
if ( iFrom == iTo )
{
/* Pointless reorder */
return;
}
if ( iFrom < 0 || iFrom >= iCols )
{
this.oApi._fnLog( oSettings, 1, "ColReorder 'from' index is out of bounds: "+iFrom );
return;
}
if ( iTo < 0 || iTo >= iCols )
{
this.oApi._fnLog( oSettings, 1, "ColReorder 'to' index is out of bounds: "+iTo );
return;
}
/*
* Calculate the new column array index, so we have a mapping between the old and new
*/
var aiMapping = [];
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
aiMapping[i] = i;
}
fnArraySwitch( aiMapping, iFrom, iTo );
var aiInvertMapping = fnInvertKeyValues( aiMapping );
/*
* Convert all internal indexing to the new column order indexes
*/
/* Sorting */
for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ )
{
oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ];
}
/* Fixed sorting */
if ( oSettings.aaSortingFixed !== null )
{
for ( i=0, iLen=oSettings.aaSortingFixed.length ; i<iLen ; i++ )
{
oSettings.aaSortingFixed[i][0] = aiInvertMapping[ oSettings.aaSortingFixed[i][0] ];
}
}
/* Data column sorting (the column which the sort for a given column should take place on) */
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
oCol = oSettings.aoColumns[i];
for ( j=0, jLen=oCol.aDataSort.length ; j<jLen ; j++ )
{
oCol.aDataSort[j] = aiInvertMapping[ oCol.aDataSort[j] ];
}
}
/* Update the Get and Set functions for each column */
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
oCol = oSettings.aoColumns[i];
if ( typeof oCol.mData == 'number' ) {
oCol.mData = aiInvertMapping[ oCol.mData ];
oCol.fnGetData = oSettings.oApi._fnGetObjectDataFn( oCol.mData );
oCol.fnSetData = oSettings.oApi._fnSetObjectDataFn( oCol.mData );
}
}
/*
* Move the DOM elements
*/
if ( oSettings.aoColumns[iFrom].bVisible )
{
/* Calculate the current visible index and the point to insert the node before. The insert
* before needs to take into account that there might not be an element to insert before,
* in which case it will be null, and an appendChild should be used
*/
var iVisibleIndex = this.oApi._fnColumnIndexToVisible( oSettings, iFrom );
var iInsertBeforeIndex = null;
i = iTo < iFrom ? iTo : iTo + 1;
while ( iInsertBeforeIndex === null && i < iCols )
{
iInsertBeforeIndex = this.oApi._fnColumnIndexToVisible( oSettings, i );
i++;
}
/* Header */
nTrs = oSettings.nTHead.getElementsByTagName('tr');
for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
{
fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
}
/* Footer */
if ( oSettings.nTFoot !== null )
{
nTrs = oSettings.nTFoot.getElementsByTagName('tr');
for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
{
fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
}
}
/* Body */
for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
{
if ( oSettings.aoData[i].nTr !== null )
{
fnDomSwitch( oSettings.aoData[i].nTr, iVisibleIndex, iInsertBeforeIndex );
}
}
}
/*
* Move the internal array elements
*/
/* Columns */
fnArraySwitch( oSettings.aoColumns, iFrom, iTo );
/* Search columns */
fnArraySwitch( oSettings.aoPreSearchCols, iFrom, iTo );
/* Array array - internal data anodes cache */
for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
{
if ( $.isArray( oSettings.aoData[i]._aData ) ) {
fnArraySwitch( oSettings.aoData[i]._aData, iFrom, iTo );
}
fnArraySwitch( oSettings.aoData[i]._anHidden, iFrom, iTo );
}
/* Reposition the header elements in the header layout array */
for ( i=0, iLen=oSettings.aoHeader.length ; i<iLen ; i++ )
{
fnArraySwitch( oSettings.aoHeader[i], iFrom, iTo );
}
if ( oSettings.aoFooter !== null )
{
for ( i=0, iLen=oSettings.aoFooter.length ; i<iLen ; i++ )
{
fnArraySwitch( oSettings.aoFooter[i], iFrom, iTo );
}
}
/*
* Update DataTables' event handlers
*/
/* Sort listener */
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
$(oSettings.aoColumns[i].nTh).unbind('click');
this.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, i );
}
/* Fire an event so other plug-ins can update */
$(oSettings.oInstance).trigger( 'column-reorder', [ oSettings, {
"iFrom": iFrom,
"iTo": iTo,
"aiInvertMapping": aiInvertMapping
} ] );
if ( typeof oSettings.oInstance._oPluginFixedHeader != 'undefined' )
{
oSettings.oInstance._oPluginFixedHeader.fnUpdate();
}
};
/**
* ColReorder provides column visiblity control for DataTables
* @class ColReorder
* @constructor
* @param {object} DataTables settings object
* @param {object} ColReorder options
*/
ColReorder = function( oDTSettings, oOpts )
{
/* Santiy check that we are a new instance */
if ( !this.CLASS || this.CLASS != "ColReorder" )
{
alert( "Warning: ColReorder must be initialised with the keyword 'new'" );
}
if ( typeof oOpts == 'undefined' )
{
oOpts = {};
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public class variables
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* @namespace Settings object which contains customisable information for ColReorder instance
*/
this.s = {
/**
* DataTables settings object
* @property dt
* @type Object
* @default null
*/
"dt": null,
/**
* Initialisation object used for this instance
* @property init
* @type object
* @default {}
*/
"init": oOpts,
/**
* Number of columns to fix (not allow to be reordered)
* @property fixed
* @type int
* @default 0
*/
"fixed": 0,
/**
* Callback function for once the reorder has been done
* @property dropcallback
* @type function
* @default null
*/
"dropCallback": null,
/**
* @namespace Information used for the mouse drag
*/
"mouse": {
"startX": -1,
"startY": -1,
"offsetX": -1,
"offsetY": -1,
"target": -1,
"targetIndex": -1,
"fromIndex": -1
},
/**
* Information which is used for positioning the insert cusor and knowing where to do the
* insert. Array of objects with the properties:
* x: x-axis position
* to: insert point
* @property aoTargets
* @type array
* @default []
*/
"aoTargets": []
};
/**
* @namespace Common and useful DOM elements for the class instance
*/
this.dom = {
/**
* Dragging element (the one the mouse is moving)
* @property drag
* @type element
* @default null
*/
"drag": null,
/**
* The insert cursor
* @property pointer
* @type element
* @default null
*/
"pointer": null
};
/* Constructor logic */
this.s.dt = oDTSettings.oInstance.fnSettings();
this._fnConstruct();
/* Add destroy callback */
oDTSettings.oApi._fnCallbackReg(oDTSettings, 'aoDestroyCallback', jQuery.proxy(this._fnDestroy, this), 'ColReorder');
/* Store the instance for later use */
ColReorder.aoInstances.push( this );
return this;
};
ColReorder.prototype = {
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Public methods
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
"fnReset": function ()
{
var a = [];
for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
{
a.push( this.s.dt.aoColumns[i]._ColReorder_iOrigCol );
}
this._fnOrderColumns( a );
},
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Private methods (they are of course public in JS, but recommended as private)
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Constructor logic
* @method _fnConstruct
* @returns void
* @private
*/
"_fnConstruct": function ()
{
var that = this;
var i, iLen;
/* Columns discounted from reordering - counting left to right */
if ( typeof this.s.init.iFixedColumns != 'undefined' )
{
this.s.fixed = this.s.init.iFixedColumns;
}
/* Drop callback initialisation option */
if ( typeof this.s.init.fnReorderCallback != 'undefined' )
{
this.s.dropCallback = this.s.init.fnReorderCallback;
}
/* Add event handlers for the drag and drop, and also mark the original column order */
for ( i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
{
if ( i > this.s.fixed-1 )
{
this._fnMouseListener( i, this.s.dt.aoColumns[i].nTh );
}
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
}
/* State saving */
this.s.dt.oApi._fnCallbackReg( this.s.dt, 'aoStateSaveParams', function (oS, oData) {
that._fnStateSave.call( that, oData );
}, "ColReorder_State" );
/* An initial column order has been specified */
var aiOrder = null;
if ( typeof this.s.init.aiOrder != 'undefined' )
{
aiOrder = this.s.init.aiOrder.slice();
}
/* State loading, overrides the column order given */
if ( this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColReorder != 'undefined' &&
this.s.dt.oLoadedState.ColReorder.length == this.s.dt.aoColumns.length )
{
aiOrder = this.s.dt.oLoadedState.ColReorder;
}
/* If we have an order to apply - do so */
if ( aiOrder )
{
/* We might be called during or after the DataTables initialisation. If before, then we need
* to wait until the draw is done, if after, then do what we need to do right away
*/
if ( !that.s.dt._bInitComplete )
{
var bDone = false;
this.s.dt.aoDrawCallback.push( {
"fn": function () {
if ( !that.s.dt._bInitComplete && !bDone )
{
bDone = true;
var resort = fnInvertKeyValues( aiOrder );
that._fnOrderColumns.call( that, resort );
}
},
"sName": "ColReorder_Pre"
} );
}
else
{
var resort = fnInvertKeyValues( aiOrder );
that._fnOrderColumns.call( that, resort );
}
}
},
/**
* Set the column order from an array
* @method _fnOrderColumns
* @param array a An array of integers which dictate the column order that should be applied
* @returns void
* @private
*/
"_fnOrderColumns": function ( a )
{
if ( a.length != this.s.dt.aoColumns.length )
{
this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "ColReorder - array reorder does not "+
"match known number of columns. Skipping." );
return;
}
for ( var i=0, iLen=a.length ; i<iLen ; i++ )
{
var currIndex = $.inArray( i, a );
if ( i != currIndex )
{
/* Reorder our switching array */
fnArraySwitch( a, currIndex, i );
/* Do the column reorder in the table */
this.s.dt.oInstance.fnColReorder( currIndex, i );
}
}
/* When scrolling we need to recalculate the column sizes to allow for the shift */
if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
{
this.s.dt.oInstance.fnAdjustColumnSizing();
}
/* Save the state */
this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
},
/**
* Because we change the indexes of columns in the table, relative to their starting point
* we need to reorder the state columns to what they are at the starting point so we can
* then rearrange them again on state load!
* @method _fnStateSave
* @param object oState DataTables state
* @returns string JSON encoded cookie string for DataTables
* @private
*/
"_fnStateSave": function ( oState )
{
var i, iLen, aCopy, iOrigColumn;
var oSettings = this.s.dt;
/* Sorting */
for ( i=0 ; i<oState.aaSorting.length ; i++ )
{
oState.aaSorting[i][0] = oSettings.aoColumns[ oState.aaSorting[i][0] ]._ColReorder_iOrigCol;
}
aSearchCopy = $.extend( true, [], oState.aoSearchCols );
oState.ColReorder = [];
for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
{
iOrigColumn = oSettings.aoColumns[i]._ColReorder_iOrigCol;
/* Column filter */
oState.aoSearchCols[ iOrigColumn ] = aSearchCopy[i];
/* Visibility */
oState.abVisCols[ iOrigColumn ] = oSettings.aoColumns[i].bVisible;
/* Column reordering */
oState.ColReorder.push( iOrigColumn );
}
},
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Mouse drop and drag
*/
/**
* Add a mouse down listener to a particluar TH element
* @method _fnMouseListener
* @param int i Column index
* @param element nTh TH element clicked on
* @returns void
* @private
*/
"_fnMouseListener": function ( i, nTh )
{
var that = this;
$(nTh).bind( 'mousedown.ColReorder', function (e) {
e.preventDefault();
that._fnMouseDown.call( that, e, nTh );
} );
},
/**
* Mouse down on a TH element in the table header
* @method _fnMouseDown
* @param event e Mouse event
* @param element nTh TH element to be dragged
* @returns void
* @private
*/
"_fnMouseDown": function ( e, nTh )
{
var
that = this,
aoColumns = this.s.dt.aoColumns;
/* Store information about the mouse position */
var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).parents('TH')[0];
var offset = $(nThTarget).offset();
this.s.mouse.startX = e.pageX;
this.s.mouse.startY = e.pageY;
this.s.mouse.offsetX = e.pageX - offset.left;
this.s.mouse.offsetY = e.pageY - offset.top;
this.s.mouse.target = nTh;
this.s.mouse.targetIndex = $('th', nTh.parentNode).index( nTh );
this.s.mouse.fromIndex = this.s.dt.oInstance.oApi._fnVisibleToColumnIndex( this.s.dt,
this.s.mouse.targetIndex );
/* Calculate a cached array with the points of the column inserts, and the 'to' points */
this.s.aoTargets.splice( 0, this.s.aoTargets.length );
this.s.aoTargets.push( {
"x": $(this.s.dt.nTable).offset().left,
"to": 0
} );
var iToPoint = 0;
for ( var i=0, iLen=aoColumns.length ; i<iLen ; i++ )
{
/* For the column / header in question, we want it's position to remain the same if the
* position is just to it's immediate left or right, so we only incremement the counter for
* other columns
*/
if ( i != this.s.mouse.fromIndex )
{
iToPoint++;
}
if ( aoColumns[i].bVisible )
{
this.s.aoTargets.push( {
"x": $(aoColumns[i].nTh).offset().left + $(aoColumns[i].nTh).outerWidth(),
"to": iToPoint
} );
}
}
/* Disallow columns for being reordered by drag and drop, counting left to right */
if ( this.s.fixed !== 0 )
{
this.s.aoTargets.splice( 0, this.s.fixed );
}
/* Add event handlers to the document */
$(document).bind( 'mousemove.ColReorder', function (e) {
that._fnMouseMove.call( that, e );
} );
$(document).bind( 'mouseup.ColReorder', function (e) {
that._fnMouseUp.call( that, e );
} );
},
/**
* Deal with a mouse move event while dragging a node
* @method _fnMouseMove
* @param event e Mouse event
* @returns void
* @private
*/
"_fnMouseMove": function ( e )
{
var that = this;
if ( this.dom.drag === null )
{
/* Only create the drag element if the mouse has moved a specific distance from the start
* point - this allows the user to make small mouse movements when sorting and not have a
* possibly confusing drag element showing up
*/
if ( Math.pow(
Math.pow(e.pageX - this.s.mouse.startX, 2) +
Math.pow(e.pageY - this.s.mouse.startY, 2), 0.5 ) < 5 )
{
return;
}
this._fnCreateDragNode();
}
/* Position the element - we respect where in the element the click occured */
this.dom.drag.style.left = (e.pageX - this.s.mouse.offsetX) + "px";
this.dom.drag.style.top = (e.pageY - this.s.mouse.offsetY) + "px";
/* Based on the current mouse position, calculate where the insert should go */
var bSet = false;
for ( var i=1, iLen=this.s.aoTargets.length ; i<iLen ; i++ )
{
if ( e.pageX < this.s.aoTargets[i-1].x + ((this.s.aoTargets[i].x-this.s.aoTargets[i-1].x)/2) )
{
this.dom.pointer.style.left = this.s.aoTargets[i-1].x +"px";
this.s.mouse.toIndex = this.s.aoTargets[i-1].to;
bSet = true;
break;
}
}
/* The insert element wasn't positioned in the array (less than operator), so we put it at
* the end
*/
if ( !bSet )
{
this.dom.pointer.style.left = this.s.aoTargets[this.s.aoTargets.length-1].x +"px";
this.s.mouse.toIndex = this.s.aoTargets[this.s.aoTargets.length-1].to;
}
},
/**
* Finish off the mouse drag and insert the column where needed
* @method _fnMouseUp
* @param event e Mouse event
* @returns void
* @private
*/
"_fnMouseUp": function ( e )
{
var that = this;
$(document).unbind( 'mousemove.ColReorder' );
$(document).unbind( 'mouseup.ColReorder' );
if ( this.dom.drag !== null )
{
/* Remove the guide elements */
document.body.removeChild( this.dom.drag );
document.body.removeChild( this.dom.pointer );
this.dom.drag = null;
this.dom.pointer = null;
/* Actually do the reorder */
this.s.dt.oInstance.fnColReorder( this.s.mouse.fromIndex, this.s.mouse.toIndex );
/* When scrolling we need to recalculate the column sizes to allow for the shift */
if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
{
this.s.dt.oInstance.fnAdjustColumnSizing();
}
if ( this.s.dropCallback !== null )
{
this.s.dropCallback.call( this );
}
/* Save the state */
this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
}
},
/**
* Copy the TH element that is being drags so the user has the idea that they are actually
* moving it around the page.
* @method _fnCreateDragNode
* @returns void
* @private
*/
"_fnCreateDragNode": function ()
{
var that = this;
this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
this.dom.drag.className += " DTCR_clonedTable";
while ( this.dom.drag.getElementsByTagName('caption').length > 0 )
{
this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('caption')[0] );
}
while ( this.dom.drag.getElementsByTagName('tbody').length > 0 )
{
this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tbody')[0] );
}
while ( this.dom.drag.getElementsByTagName('tfoot').length > 0 )
{
this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tfoot')[0] );
}
$('thead tr:eq(0)', this.dom.drag).each( function () {
$('th', this).eq(that.s.mouse.targetIndex).siblings().remove();
} );
$('tr', this.dom.drag).height( $('tr:eq(0)', that.s.dt.nTHead).height() );
$('thead tr:gt(0)', this.dom.drag).remove();
$('thead th:eq(0)', this.dom.drag).each( function (i) {
this.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).width()+"px";
} );
this.dom.drag.style.position = "absolute";
this.dom.drag.style.top = "0px";
this.dom.drag.style.left = "0px";
this.dom.drag.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).outerWidth()+"px";
this.dom.pointer = document.createElement( 'div' );
this.dom.pointer.className = "DTCR_pointer";
this.dom.pointer.style.position = "absolute";
if ( this.s.dt.oScroll.sX === "" && this.s.dt.oScroll.sY === "" )
{
this.dom.pointer.style.top = $(this.s.dt.nTable).offset().top+"px";
this.dom.pointer.style.height = $(this.s.dt.nTable).height()+"px";
}
else
{
this.dom.pointer.style.top = $('div.dataTables_scroll', this.s.dt.nTableWrapper).offset().top+"px";
this.dom.pointer.style.height = $('div.dataTables_scroll', this.s.dt.nTableWrapper).height()+"px";
}
document.body.appendChild( this.dom.pointer );
document.body.appendChild( this.dom.drag );
},
/**
* Clean up ColReorder memory references and event handlers
* @method _fnDestroy
* @returns void
* @private
*/
"_fnDestroy": function ()
{
for ( var i=0, iLen=ColReorder.aoInstances.length ; i<iLen ; i++ )
{
if ( ColReorder.aoInstances[i] === this )
{
ColReorder.aoInstances.splice( i, 1 );
break;
}
}
$(this.s.dt.nTHead).find( '*' ).unbind( '.ColReorder' );
this.s.dt.oInstance._oPluginColReorder = null;
this.s = null;
}
};
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Static parameters
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Array of all ColReorder instances for later reference
* @property ColReorder.aoInstances
* @type array
* @default []
* @static
*/
ColReorder.aoInstances = [];
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Static functions
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Reset the column ordering for a DataTables instance
* @method ColReorder.fnReset
* @param object oTable DataTables instance to consider
* @returns void
* @static
*/
ColReorder.fnReset = function ( oTable )
{
for ( var i=0, iLen=ColReorder.aoInstances.length ; i<iLen ; i++ )
{
if ( ColReorder.aoInstances[i].s.dt.oInstance == oTable )
{
ColReorder.aoInstances[i].fnReset();
}
}
};
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Constants
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
* Name of this class
* @constant CLASS
* @type String
* @default ColReorder
*/
ColReorder.prototype.CLASS = "ColReorder";
/**
* ColReorder version
* @constant VERSION
* @type String
* @default As code
*/
ColReorder.VERSION = "1.0.8";
ColReorder.prototype.VERSION = ColReorder.VERSION;
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Initialisation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/*
* Register a new feature with DataTables
*/
if ( typeof $.fn.dataTable == "function" &&
typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
$.fn.dataTableExt.fnVersionCheck('1.9.3') )
{
$.fn.dataTableExt.aoFeatures.push( {
"fnInit": function( oDTSettings ) {
var oTable = oDTSettings.oInstance;
if ( typeof oTable._oPluginColReorder == 'undefined' ) {
var opts = typeof oDTSettings.oInit.oColReorder != 'undefined' ?
oDTSettings.oInit.oColReorder : {};
oTable._oPluginColReorder = new ColReorder( oDTSettings, opts );
} else {
oTable.oApi._fnLog( oDTSettings, 1, "ColReorder attempted to initialise twice. Ignoring second" );
}
return null; /* No node to insert */
},
"cFeature": "R",
"sFeature": "ColReorder"
} );
}
else
{
alert( "Warning: ColReorder requires DataTables 1.9.3 or greater - www.datatables.net/download");
}
})(jQuery, window, document);

View File

@@ -0,0 +1,33 @@
/*
* File: ColReorder.min.js
* Version: 1.0.8
* Author: Allan Jardine (www.sprymedia.co.uk)
*
* Copyright 2010-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.
*/
(function(f,o,g){function m(a){for(var b=[],d=0,c=a.length;d<c;d++)b[a[d]]=d;return b}function j(a,b,d){b=a.splice(b,1)[0];a.splice(d,0,b)}function n(a,b,d){for(var c=[],e=0,f=a.childNodes.length;e<f;e++)1==a.childNodes[e].nodeType&&c.push(a.childNodes[e]);b=c[b];null!==d?a.insertBefore(b,c[d]):a.appendChild(b)}f.fn.dataTableExt.oApi.fnColReorder=function(a,b,d){var c,e,h,l,k=a.aoColumns.length,i;if(b!=d)if(0>b||b>=k)this.oApi._fnLog(a,1,"ColReorder 'from' index is out of bounds: "+b);else if(0>d||
d>=k)this.oApi._fnLog(a,1,"ColReorder 'to' index is out of bounds: "+d);else{var g=[];c=0;for(e=k;c<e;c++)g[c]=c;j(g,b,d);g=m(g);c=0;for(e=a.aaSorting.length;c<e;c++)a.aaSorting[c][0]=g[a.aaSorting[c][0]];if(null!==a.aaSortingFixed){c=0;for(e=a.aaSortingFixed.length;c<e;c++)a.aaSortingFixed[c][0]=g[a.aaSortingFixed[c][0]]}c=0;for(e=k;c<e;c++){i=a.aoColumns[c];h=0;for(l=i.aDataSort.length;h<l;h++)i.aDataSort[h]=g[i.aDataSort[h]]}c=0;for(e=k;c<e;c++)i=a.aoColumns[c],"number"==typeof i.mData&&(i.mData=
g[i.mData],i.fnGetData=a.oApi._fnGetObjectDataFn(i.mData),i.fnSetData=a.oApi._fnSetObjectDataFn(i.mData));if(a.aoColumns[b].bVisible){l=this.oApi._fnColumnIndexToVisible(a,b);i=null;for(c=d<b?d:d+1;null===i&&c<k;)i=this.oApi._fnColumnIndexToVisible(a,c),c++;h=a.nTHead.getElementsByTagName("tr");c=0;for(e=h.length;c<e;c++)n(h[c],l,i);if(null!==a.nTFoot){h=a.nTFoot.getElementsByTagName("tr");c=0;for(e=h.length;c<e;c++)n(h[c],l,i)}c=0;for(e=a.aoData.length;c<e;c++)null!==a.aoData[c].nTr&&n(a.aoData[c].nTr,
l,i)}j(a.aoColumns,b,d);j(a.aoPreSearchCols,b,d);c=0;for(e=a.aoData.length;c<e;c++)f.isArray(a.aoData[c]._aData)&&j(a.aoData[c]._aData,b,d),j(a.aoData[c]._anHidden,b,d);c=0;for(e=a.aoHeader.length;c<e;c++)j(a.aoHeader[c],b,d);if(null!==a.aoFooter){c=0;for(e=a.aoFooter.length;c<e;c++)j(a.aoFooter[c],b,d)}c=0;for(e=k;c<e;c++)f(a.aoColumns[c].nTh).unbind("click"),this.oApi._fnSortAttachListener(a,a.aoColumns[c].nTh,c);f(a.oInstance).trigger("column-reorder",[a,{iFrom:b,iTo:d,aiInvertMapping:g}]);"undefined"!=
typeof a.oInstance._oPluginFixedHeader&&a.oInstance._oPluginFixedHeader.fnUpdate()}};ColReorder=function(a,b){(!this.CLASS||"ColReorder"!=this.CLASS)&&alert("Warning: ColReorder must be initialised with the keyword 'new'");"undefined"==typeof b&&(b={});this.s={dt:null,init:b,fixed:0,dropCallback:null,mouse:{startX:-1,startY:-1,offsetX:-1,offsetY:-1,target:-1,targetIndex:-1,fromIndex:-1},aoTargets:[]};this.dom={drag:null,pointer:null};this.s.dt=a.oInstance.fnSettings();this._fnConstruct();a.oApi._fnCallbackReg(a,
"aoDestroyCallback",jQuery.proxy(this._fnDestroy,this),"ColReorder");ColReorder.aoInstances.push(this);return this};ColReorder.prototype={fnReset:function(){for(var a=[],b=0,d=this.s.dt.aoColumns.length;b<d;b++)a.push(this.s.dt.aoColumns[b]._ColReorder_iOrigCol);this._fnOrderColumns(a)},_fnConstruct:function(){var a=this,b,d;"undefined"!=typeof this.s.init.iFixedColumns&&(this.s.fixed=this.s.init.iFixedColumns);"undefined"!=typeof this.s.init.fnReorderCallback&&(this.s.dropCallback=this.s.init.fnReorderCallback);
b=0;for(d=this.s.dt.aoColumns.length;b<d;b++)b>this.s.fixed-1&&this._fnMouseListener(b,this.s.dt.aoColumns[b].nTh),this.s.dt.aoColumns[b]._ColReorder_iOrigCol=b;this.s.dt.oApi._fnCallbackReg(this.s.dt,"aoStateSaveParams",function(c,b){a._fnStateSave.call(a,b)},"ColReorder_State");var c=null;"undefined"!=typeof this.s.init.aiOrder&&(c=this.s.init.aiOrder.slice());this.s.dt.oLoadedState&&("undefined"!=typeof this.s.dt.oLoadedState.ColReorder&&this.s.dt.oLoadedState.ColReorder.length==this.s.dt.aoColumns.length)&&
(c=this.s.dt.oLoadedState.ColReorder);if(c)if(a.s.dt._bInitComplete)b=m(c),a._fnOrderColumns.call(a,b);else{var e=!1;this.s.dt.aoDrawCallback.push({fn:function(){if(!a.s.dt._bInitComplete&&!e){e=true;var b=m(c);a._fnOrderColumns.call(a,b)}},sName:"ColReorder_Pre"})}},_fnOrderColumns:function(a){if(a.length!=this.s.dt.aoColumns.length)this.s.dt.oInstance.oApi._fnLog(this.s.dt,1,"ColReorder - array reorder does not match known number of columns. Skipping.");else{for(var b=0,d=a.length;b<d;b++){var c=
f.inArray(b,a);b!=c&&(j(a,c,b),this.s.dt.oInstance.fnColReorder(c,b))}(""!==this.s.dt.oScroll.sX||""!==this.s.dt.oScroll.sY)&&this.s.dt.oInstance.fnAdjustColumnSizing();this.s.dt.oInstance.oApi._fnSaveState(this.s.dt)}},_fnStateSave:function(a){var b,d,c,e=this.s.dt;for(b=0;b<a.aaSorting.length;b++)a.aaSorting[b][0]=e.aoColumns[a.aaSorting[b][0]]._ColReorder_iOrigCol;aSearchCopy=f.extend(!0,[],a.aoSearchCols);a.ColReorder=[];b=0;for(d=e.aoColumns.length;b<d;b++)c=e.aoColumns[b]._ColReorder_iOrigCol,
a.aoSearchCols[c]=aSearchCopy[b],a.abVisCols[c]=e.aoColumns[b].bVisible,a.ColReorder.push(c)},_fnMouseListener:function(a,b){var d=this;f(b).bind("mousedown.ColReorder",function(a){a.preventDefault();d._fnMouseDown.call(d,a,b)})},_fnMouseDown:function(a,b){var d=this,c=this.s.dt.aoColumns,e="TH"==a.target.nodeName?a.target:f(a.target).parents("TH")[0],e=f(e).offset();this.s.mouse.startX=a.pageX;this.s.mouse.startY=a.pageY;this.s.mouse.offsetX=a.pageX-e.left;this.s.mouse.offsetY=a.pageY-e.top;this.s.mouse.target=
b;this.s.mouse.targetIndex=f("th",b.parentNode).index(b);this.s.mouse.fromIndex=this.s.dt.oInstance.oApi._fnVisibleToColumnIndex(this.s.dt,this.s.mouse.targetIndex);this.s.aoTargets.splice(0,this.s.aoTargets.length);this.s.aoTargets.push({x:f(this.s.dt.nTable).offset().left,to:0});for(var h=e=0,j=c.length;h<j;h++)h!=this.s.mouse.fromIndex&&e++,c[h].bVisible&&this.s.aoTargets.push({x:f(c[h].nTh).offset().left+f(c[h].nTh).outerWidth(),to:e});0!==this.s.fixed&&this.s.aoTargets.splice(0,this.s.fixed);
f(g).bind("mousemove.ColReorder",function(a){d._fnMouseMove.call(d,a)});f(g).bind("mouseup.ColReorder",function(a){d._fnMouseUp.call(d,a)})},_fnMouseMove:function(a){if(null===this.dom.drag){if(5>Math.pow(Math.pow(a.pageX-this.s.mouse.startX,2)+Math.pow(a.pageY-this.s.mouse.startY,2),0.5))return;this._fnCreateDragNode()}this.dom.drag.style.left=a.pageX-this.s.mouse.offsetX+"px";this.dom.drag.style.top=a.pageY-this.s.mouse.offsetY+"px";for(var b=!1,d=1,c=this.s.aoTargets.length;d<c;d++)if(a.pageX<
this.s.aoTargets[d-1].x+(this.s.aoTargets[d].x-this.s.aoTargets[d-1].x)/2){this.dom.pointer.style.left=this.s.aoTargets[d-1].x+"px";this.s.mouse.toIndex=this.s.aoTargets[d-1].to;b=!0;break}b||(this.dom.pointer.style.left=this.s.aoTargets[this.s.aoTargets.length-1].x+"px",this.s.mouse.toIndex=this.s.aoTargets[this.s.aoTargets.length-1].to)},_fnMouseUp:function(){f(g).unbind("mousemove.ColReorder");f(g).unbind("mouseup.ColReorder");null!==this.dom.drag&&(g.body.removeChild(this.dom.drag),g.body.removeChild(this.dom.pointer),
this.dom.drag=null,this.dom.pointer=null,this.s.dt.oInstance.fnColReorder(this.s.mouse.fromIndex,this.s.mouse.toIndex),(""!==this.s.dt.oScroll.sX||""!==this.s.dt.oScroll.sY)&&this.s.dt.oInstance.fnAdjustColumnSizing(),null!==this.s.dropCallback&&this.s.dropCallback.call(this),this.s.dt.oInstance.oApi._fnSaveState(this.s.dt))},_fnCreateDragNode:function(){var a=this;this.dom.drag=f(this.s.dt.nTHead.parentNode).clone(!0)[0];for(this.dom.drag.className+=" DTCR_clonedTable";0<this.dom.drag.getElementsByTagName("caption").length;)this.dom.drag.removeChild(this.dom.drag.getElementsByTagName("caption")[0]);
for(;0<this.dom.drag.getElementsByTagName("tbody").length;)this.dom.drag.removeChild(this.dom.drag.getElementsByTagName("tbody")[0]);for(;0<this.dom.drag.getElementsByTagName("tfoot").length;)this.dom.drag.removeChild(this.dom.drag.getElementsByTagName("tfoot")[0]);f("thead tr:eq(0)",this.dom.drag).each(function(){f("th",this).eq(a.s.mouse.targetIndex).siblings().remove()});f("tr",this.dom.drag).height(f("tr:eq(0)",a.s.dt.nTHead).height());f("thead tr:gt(0)",this.dom.drag).remove();f("thead th:eq(0)",
this.dom.drag).each(function(){this.style.width=f("th:eq("+a.s.mouse.targetIndex+")",a.s.dt.nTHead).width()+"px"});this.dom.drag.style.position="absolute";this.dom.drag.style.top="0px";this.dom.drag.style.left="0px";this.dom.drag.style.width=f("th:eq("+a.s.mouse.targetIndex+")",a.s.dt.nTHead).outerWidth()+"px";this.dom.pointer=g.createElement("div");this.dom.pointer.className="DTCR_pointer";this.dom.pointer.style.position="absolute";""===this.s.dt.oScroll.sX&&""===this.s.dt.oScroll.sY?(this.dom.pointer.style.top=
f(this.s.dt.nTable).offset().top+"px",this.dom.pointer.style.height=f(this.s.dt.nTable).height()+"px"):(this.dom.pointer.style.top=f("div.dataTables_scroll",this.s.dt.nTableWrapper).offset().top+"px",this.dom.pointer.style.height=f("div.dataTables_scroll",this.s.dt.nTableWrapper).height()+"px");g.body.appendChild(this.dom.pointer);g.body.appendChild(this.dom.drag)},_fnDestroy:function(){for(var a=0,b=ColReorder.aoInstances.length;a<b;a++)if(ColReorder.aoInstances[a]===this){ColReorder.aoInstances.splice(a,
1);break}f(this.s.dt.nTHead).find("*").unbind(".ColReorder");this.s=this.s.dt.oInstance._oPluginColReorder=null}};ColReorder.aoInstances=[];ColReorder.fnReset=function(a){for(var b=0,d=ColReorder.aoInstances.length;b<d;b++)ColReorder.aoInstances[b].s.dt.oInstance==a&&ColReorder.aoInstances[b].fnReset()};ColReorder.prototype.CLASS="ColReorder";ColReorder.VERSION="1.0.8";ColReorder.prototype.VERSION=ColReorder.VERSION;"function"==typeof f.fn.dataTable&&"function"==typeof f.fn.dataTableExt.fnVersionCheck&&
f.fn.dataTableExt.fnVersionCheck("1.9.3")?f.fn.dataTableExt.aoFeatures.push({fnInit:function(a){var b=a.oInstance;"undefined"==typeof b._oPluginColReorder?b._oPluginColReorder=new ColReorder(a,"undefined"!=typeof a.oInit.oColReorder?a.oInit.oColReorder:{}):b.oApi._fnLog(a,1,"ColReorder attempted to initialise twice. Ignoring second");return null},cFeature:"R",sFeature:"ColReorder"}):alert("Warning: ColReorder requires DataTables 1.9.3 or greater - www.datatables.net/download")})(jQuery,window,document);

View File

@@ -0,0 +1,501 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"oColReorder": {
"aiOrder": [ 4, 3, 2, 1, 0 ]
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with predefined column ordering
</div>
<h1>Preamble</h1>
<p>ColReorder provides the ability to specify a column ordering which is not that of the
HTML (which typically you will want) through the parameter oColReorder.aiOrder. This is
an array of integers with the column ordering you want.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"oColReorder": {
"aiOrder": [ 4, 3, 2, 1, 0 ]
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,533 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"oColReorder": {
"aiOrder": [ 4, 3, 2, 1, 0 ]
}
} );
$('#reset').click( function () {
ColReorder.fnReset( oTable );
return false;
} );
} );
/*
* Alternative intialisation using 'new'
$(document).ready( function () {
var oTable = $('#example').dataTable();
var colreorder = new ColReorder( oTable, {
"aiOrder": [ 4, 3, 2, 1, 0 ]
} );
$('#reset').click( function () {
colreorder.fnReset();
return false;
} );
} );
*
*/
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with the ability to reset the ordering
</div>
<h1>Preamble</h1>
<p>One useful control option to present the end user when using ColReorder is the ability
to reset the column ordering to that which was found in the HTML. This can be done by
calling the fnReset API function. While ColReorder does not provide a visual element for
this itself (in order to provide maximum flexibility) it is easy to hook to an event
handler, as shown in this example.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<button id="reset">Reset to original HTML order</button><br><br>
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"oColReorder": {
"aiOrder": [ 4, 3, 2, 1, 0 ]
}
} );
$('#reset').click( function () {
ColReorder.fnReset( oTable );
return false;
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,497 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"sScrollY": "200px",
"bPaginate": false
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with scrolling
</div>
<h1>Preamble</h1>
<p>This is a simple example to show ColReorder working with DataTables scrolling.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"sScrollY": "200px",
"bPaginate": false
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,150 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../examples/server_side/scripts/objects.php",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with server-side processing
</div>
<h1>Preamble</h1>
<p>Server-side processing can be exceptionally useful in DataTables when dealing with
massive data sets, and ColReorder works with this as would be expected. There must be
special consideration for the column ordering on the server-side script since the
columns can be in an unexpected order. For this you can either choose to use the
<i>sName</i> parameter for each column and take this into account in the server-side
script (the parameter 'sColumns' is a comma separated string of these sName parameters).</p>
</p>Alternatively use the more flexible <a href="http://datatables.net/usage/columns#mDataProp">mDataProp</a>
option for each column. This allows you to use JSON objects which DataTables, so order doesn't
matter like it would do in an array. Again the server-side script must take this into account
through the <i>mDataProp_{i}</i> which is sent for each column (so the server knows which
column is to be sorted on).</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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>
</tbody>
</table>
</div>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../examples/server_side/scripts/objects.php",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
} );
} );</pre>
<h1>Example JSON return from the server</h1>
<pre>{
"sEcho": 1,
"iTotalRecords": "57",
"iTotalDisplayRecords": "57",
"aaData": [
{
"engine": "Gecko",
"browser": "Firefox 1.0",
"platform": "Win 98+ / OSX.2+",
"version": "1.7",
"grade": "A"
},
{
"engine": "Gecko",
"browser": "Firefox 1.5",
"platform": "Win 98+ / OSX.2+",
"version": "1.8",
"grade": "A"
},
...
]
}</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,498 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"bStateSave": true
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with state saving
</div>
<h1>Preamble</h1>
<p>A useful interaction pattern to use in DataTables is state saving, so when the end user
reloads or revisits a page its previous state is retained. ColReorder works seamlessly
with state saving in DataTables, remembering and restoring the column positions, as well
as everything else such as sorting and filtering.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'Rlfrtip',
"bStateSave": true
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,500 @@
<!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>ColReorder 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/ColReorder.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/ColReorder.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'R<"H"lfr>t<"F"ip>',
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColReorder example with jQuery UI theming
</div>
<h1>Preamble</h1>
<p>This example shows how the jQuery UI ThemeRoller option in DataTables can be used
with ColReorder. The important thing to node here is how sDom is set up in order to
include the required classes and elements.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="alt_insert.html">Styling the insert cursor</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
<li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
<li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
<li><a href="predefined.html">Using a predefined column order set</a></li>
<li><a href="reset.html">Providing a user control to reset the column order</a></li>
<li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
<li><a href="server_side.html">Server-side processing support</a></li>
<li><a href="state_save.html">State saving of the column position</a></li>
<li><a href="theme.html">jQuery UI theme integration</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sDom": 'R&lt;"H"lfr&gt;t&lt;"F"ip&gt;',
"bJQueryUI": true,
"sPaginationType": "full_numbers"
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColReorder and DataTables &copy; Allan Jardine 2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,500 @@
<!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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"aiExclude": [ 0 ]
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example - exclude columns from list
</div>
<h1>Preamble</h1>
<p>It can at times be useful to exclude columns from being in the 'show / hide' list (for
example if you have hidden information that the end user shouldn't be able to make
visible. This can be done by the oColVis.aiExclude initialisation parameter when creating
the DataTable. This is simply an array of integers, indicating which columns should
be excluded. This example shows the first column being excluded.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip',
"oColVis": {
"aiExclude": [ 0 ]
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,490 @@
<!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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C<"clear">lfrtip'
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example
</div>
<h1>Preamble</h1>
<p>ColVis is a plug-in for DataTables which presents a list of all columns to a user and allows them to select which ones they wish to be visible. Click the 'Show / hide columns' button to be presented with a list of columns in the table, and click the buttons to show and hide them as you wish.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip'
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,76 @@
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* ColVis styles
*/
.ColVis {
float: right;
margin-bottom: 1em;
}
.ColVis_Button {
position: relative;
float: left;
margin-right: 3px;
padding: 3px 5px;
height: 30px;
background-color: #fff;
border: 1px solid #d0d0d0;
cursor: pointer;
*cursor: hand;
}
button.ColVis_Button::-moz-focus-inner {
border: none !important;
padding: 0;
}
.ColVis_text_hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
div.ColVis_collectionBackground {
background-color: black;
z-index: 1100;
}
div.ColVis_collection {
position: relative;
width: 150px;
background-color: #f3f3f3;
padding: 3px;
border: 1px solid #ccc;
z-index: 1102;
}
div.ColVis_collection button.ColVis_Button {
background-color: white;
width: 100%;
float: none;
margin-bottom: 2px;
}
div.ColVis_catcher {
position: absolute;
z-index: 1101;
}
.disabled {
color: #999;
}
button.ColVis_Button {
text-align: left;
}
div.ColVis_collection button.ColVis_Button:hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
span.ColVis_radio {
display: inline-block;
width: 20px;
}

View File

@@ -0,0 +1,104 @@
/*
* An alternative styling for ColVis
* Note you will likely have to change the path for the background image used by jQuery UI theming:
* ../../../../examples/examples_support/themes/smoothness
*/
.ColVis {
position: absolute;
right: 0;
top: 0;
width: 15px;
height: 30px;
}
.ColVis_MasterButton {
height: 100%;
width: 100%;
border-left-width: 0;
cursor: pointer;
*cursor: hand;
background: url('../images/button.png') no-repeat top left;
}
button.ColVis_Button::-moz-focus-inner {
border: none !important;
padding: 0;
}
.ColVis_text_hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
div.ColVis_collectionBackground {
background-color: black;
z-index: 1100;
}
div.ColVis_collection {
position: relative;
width: 150px;
background-color: #f9f9f9;
padding: 3px;
border: 1px solid #ccc;
z-index: 1102;
}
div.ColVis_collection button.ColVis_Button {
height: 30px;
width: 100%;
margin-right: 3px;
margin-bottom: 2px;
padding: 3px 5px;
cursor: pointer;
*cursor: hand;
text-align: left;
}
div.ColVis_collection button.ColVis_Button:hover {
border: 1px solid #999;
background-color: #f0f0f0;
}
div.ColVis_catcher {
position: absolute;
z-index: 1101;
}
span.ColVis_radio {
display: inline-block;
width: 20px;
}
button.ColVis_Restore {
margin-top: 15px;
}
button.ColVis_Restore span {
display: inline-block;
padding-left: 10px;
text-align: left;
}
.disabled {
color: #999;
}
/*
* Styles needed for DataTables scrolling
*/
div.dataTables_scrollHead {
position: relative;
overflow: hidden;
}
div.dataTables_scrollBody {
overflow-y: scroll;
}
div.dataTables_scrollFoot {
overflow: hidden;
}

View File

@@ -0,0 +1,176 @@
<!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">
<title>Class: ColVis - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Class: ColVis</h1>
<p class="class-description"><p>ColVis</p></p>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (1)</a></td><td><a href="#summary_methods_static">Static methods (1)</a></td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td><a href="#summary_properties_static">Static properties (1)</a></td></tr><tr><td><a href="#summary_methods">Methods (1)</a></td><td><a href="#summary_methods_static">Static methods (1)</a></td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl><dt id="ColVis" class=" even"><a name="ColVis"></a><a name="ColVis_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>new ColVis</a></span><span class="type-sig"><span class="signature">(DataTables)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>ColVis provides column visiblity control for DataTables</p><div class="collapse_details"><h3>Constructor</h3><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">DataTables</td><td class="type type-param">object</td><td class="attributes"></td><td class="default"></td><td class="description last"><p>settings object</p></td></tr>
</tbody>
</table></div>
</dl>
</div>
<div class="doc_summary">
<a name="summary"></a>
<h2>Summary</h2>
<div class="doc_group"><a name="summary_properties_static"></a><h3 class="subsection-title">Properties - static</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aInstances">aInstances</a></span><span class="type-sig"><span class="type-signature"> :Array</span></span></dt><dd class=" even"><p>Collection of all ColVis instances</p></dd>
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#_fnAdjustOpenRows">_fnAdjustOpenRows</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Alter the colspan on any fnOpen rows</p></dd>
</dl>
</div><div class="doc_group"><a name="summary_methods_static"></a><h3 class="subsection-title">Methods - static</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#fnRebuild">fnRebuild</a></span><span class="type-sig"><span class="signature">(object)</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Rebuild the collection for a given table, or all tables if no parameter given</p></dd>
</dl>
</div>
</div>
<div class="doc_details">
<a name="details"></a>
<h2>Details</h2>
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - static</h3>
<dl>
<dt class=" even"><a name="aInstances"></a><a name="aInstances_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a href="#aInstances">aInstances</a></span><span class="type-sig"><span class="type-signature"> :Array</span></span></dt><dd class=" even"><p>Collection of all ColVis instances</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Properties:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">ColVis.aInstances</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"></td></tr>
</tbody>
</table></div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt id="ColVis#_fnAdjustOpenRows" class=" even"><a name="_fnAdjustOpenRows"></a><a name="_fnAdjustOpenRows_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>_fnAdjustOpenRows</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Alter the colspan on any fnOpen rows</p><div class="collapse_details"><dl class="details">
</dl>
</div>
</dd>
</div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - static</h3>
<dl>
<dt id="ColVis.fnRebuild" class=" even"><a name="fnRebuild"></a><a name="fnRebuild_details"></a><span class="type-attr"><span class="type-signature">&lt;static> </span></span><span class="type-name"><a>fnRebuild</a></span><span class="type-sig"><span class="signature">(object)</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Rebuild the collection for a given table, or all tables if no parameter given</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th width="20"></th>
<th width="12%" class="bottom_border name">Name</th>
<th width="10%" class="bottom_border">Type</th>
<th width="10%" class="bottom_border">Attributes</th>
<th width="10%" class="bottom_border">Default</th>
<th class="last bottom_border">Description</th>
</tr>
</thead>
<tbody>
<tr class="even"><td class="number right_border"><div>1</div></td><td class="name">object</td><td class="type type-param"></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>oTable DataTable instance to consider - optional</p></td></tr>
</tbody>
</table><h5>Returns:</h5><p class="returns"><p>void</p></p></div>
</dd>
</div>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Common and useful DOM elements for the class instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Common and useful DOM elements for the class instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: Settings object which contains customisable information for ColVis instance - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: Settings object which contains customisable information for ColVis instance</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,117 @@
<!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">
<title>Global - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Global</h1>
<div class="page-info">
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_classes">Classes (1)</a></td><td>Namespaces (0)</td></tr><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (1)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td><a href="#summary_properties">Properties (2)</a></td><td>Static properties (0)</td></tr><tr><td><a href="#summary_methods">Methods (1)</a></td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<dl class="details">
</dl>
</div>
<div class="doc_summary">
<a name="summary"></a>
<h2>Summary</h2>
<div class="doc_group"><a name="summary_classes"></a><h3 class="subsection-title">Classes</h3>
<dl>
<dt class="even"><span class="type-name"><a href="ColVis.html">ColVis</a></span></dt><dd class="even"><p>ColVis provides column visiblity control for DataTables</p></dd>
</dl></div><div class="doc_group"><a name="summary_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p></dd><dt class=" odd"><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>ColVis version</p></dd>
</dl></div><div class="doc_group"><a name="summary_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt class=" even"><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a href="#fnRebuild">fnRebuild</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"></span></span></dt><dd class=" even"><p>Rebuild the list of buttons for this instance (i.e. if there is a column header update)</p></dd>
</dl>
</div>
</div>
<div class="doc_details">
<a name="details"></a>
<h2>Details</h2>
<div class="doc_group"><a name="details_properties"></a><h3 class="subsection-title">Properties - instance</h3>
<dl>
<dt class=" even"><a name="CLASS"></a><a name="CLASS_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#CLASS">CLASS</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" even"><p>Name of this class</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd><dt class=" odd"><a name="VERSION"></a><a name="VERSION_details"></a><span class="type-attr"><span class="type-signature">&lt;constant> </span></span><span class="type-name"><a href="#VERSION">VERSION</a></span><span class="type-sig"><span class="type-signature"> :String</span></span></dt><dd class=" odd"><p>ColVis version</p><div class="collapse_details"><dl class="details">
</dl>
</div></dd>
</dl></div><div class="doc_group"><a name="details_methods"></a><h3 class="subsection-title">Methods - instance</h3>
<dl>
<dt id="fnRebuild" class=" even"><a name="fnRebuild"></a><a name="fnRebuild_details"></a><span class="type-attr"><span class="type-signature"></span></span><span class="type-name"><a>fnRebuild</a></span><span class="type-sig"><span class="signature">()</span><span class="type-signature"></span></span></span></dt><dd class=" even"><p>Rebuild the list of buttons for this instance (i.e. if there is a column header update)</p><div class="collapse_details"><dl class="details">
</dl>
<h5>Returns:</h5><p class="returns"><p>void</p></p></div>
</dd>
</div>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!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">
<title>Table of Contents - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
</div>
<div class="fw_content">
<h3 class="subsection-title">Table of Contents</h3>
<dl>
<dt><a href="ColVis.html">ColVis</a></dt><dd><p>ColVis provides column visiblity control for DataTables</p></dd>
</dl>
</div>
</div>
<div class="fw_footer">
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

View File

@@ -0,0 +1,393 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.12.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
html, body {
margin: 0;
padding: 0;
width: 100%;
font: 14px/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color: #111;
}
div.fw_container {
width: 980px;
padding-top: 2em;
margin: 0 auto;
}
div.fw_header {
position: relative;
}
div.fw_content {
padding-top: 2em;
}
div.fw_footer {
padding-top: 4em;
font-size: 75%;
text-align: center;
}
.type-attr .type-signature {
background-color: #ccc;
color: white;
border-radius: 3px;
display: inline-block;
padding: 0 3px;
font-size: 0.9em;
}
.type-attr {
float: right;
color: #999;
}
.type-name {
font-weight: bold;
}
.type-sig {
color: #999;
}
.type-param {
color: #D32929;
}
.type-return {
color: #FF8080;
}
.type-brace {
color: #111;
}
.example-code {
margin-left: 30px;
}
.example-code td.code {
border-top: 1px solid #4E6CA3 !important;
}
.type-augmented {
position: absolute;
left: 8px;
top: 0;
}
dt, dd {
padding: 0.4em 10px;
}
dt {
padding-bottom: 0 !important;
}
dd {
position: relative;
padding-top: 0 !important;
padding-left: 3em;
}
dt.even, dd.even {
background-color: white;
}
dt.odd, dd.odd {
background-color: #F2F2F2;
}
div.doc_overview dd, div.doc_overview dt {
padding-left: 0 !important;
}
.right_border div {
width: 20px;
padding: 2px 0.5em 2px 1em;
text-align: right;
}
.right_border {
border-right: 3px solid #4E6CA3;
}
.bottom_border {
border-bottom: 1px solid #4E6CA3;
}
a {
text-decoration: none;
color: #4E6CA3;
}
a:hover {
text-decoration: underline;
cursor: pointer;
*cursor: hand;
}
div.fw_content ul {
list-style-image: url('../images/arrow.png');
padding: 0 0 0 2em;
}
/*
h2 {
font-size: 1.4em;
margin-top: 2em;
border-bottom: 3px solid #829ac6;
padding-left: 5px;
}
h3 {
font-size: 1.2em;
margin-top: 1em;
border-bottom: 1px solid #A4B5D5;
padding-left: 5px;
}
*/
h1 {
font-size: 2em;
}
h2 {
font-size: 1.6em;
padding-top: 5px;
}
h2.ancestors {
font-size: 14px;
margin: 0;
}
h3 {
font-size: 1.3em;
padding-top: 5px;
margin-bottom: 5px;
}
h5 {
padding-top: 6px;
font-weight: bold;
font-size: 0.9em;
border-bottom: 1px solid #cad4e6;
margin-bottom: 1em;
}
div.doc_summary, div.doc_details {
margin-top: 2em;
clear: both;
}
div.doc_group {
margin-top: 1em;
border-top: 1px solid #A4B5D5;
border-left: 1px solid #A4B5D5;
padding-left: 10px;
}
div.extended {
margin-left: 30px;
}
table.params {
margin-left: 30px;
width: 97%;
}
table.params th,
table.params td {
padding: 3px;
}
tr.odd {
background-color: white;
}
tr.even {
background-color: #F8F8F8;
}
th.name,
td.name {
padding-left: 13px;
}
td.number {
background-color: white;
color: #5C5C5C;
}
dd.odd td.number {
background-color: #F2F2F2;
}
p {
margin: 1em 0;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
p.returns {
margin-left: 5%;
}
div.page-info {
position: absolute;
top: 0;
right: 0;
}
.private {
display: none;
}
code {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
padding: 2px 4px !important;
white-space: pre;
font-size: 0.9em;
color: #D14;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 3px;
padding: 6px 10px;
}
pre>code {
background-color: transparent;
border: none;
color: #111;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
ol {
list-style-type: decimal;
list-style-position: outside;
padding-left: 30px;
}
div.fw_nav {
position: fixed;
top: 25px;
right: 30px;
width: 250px;
border: 1px solid #A4B5D5;
background-color: white;
padding: 10px;
z-index: 1001;
font-size: 12px;
overflow: hidden;
}
div.fw_nav h2 {
margin: -10px 0 10px -10px;
width: 250px;
padding: 5px 10px;
background-color: #A4B5D5;
font-size: 12px;
cursor: pointer;
*cursor: hand;
}
div.fw_nav ul>li>div {
padding: 0 0 0 1em;
}
div.nav_blocker {
float: right;
}
div.fw_nav td {
color: #999;
}
div.fw_nav li {
margin-bottom: 5px;
}
div.fw_nav li>a {
font-weight: bold;
}
.css_clear {
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.css_right {
text-align: right;
}
.css_center {
text-align: center;
}
.css_spacing {
margin-top: 1.5em;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}

View File

@@ -0,0 +1,226 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
}
.syntaxhighlighter.source {
overflow: hidden !important;
}
.syntaxhighlighter .bold {
font-weight: bold !important;
}
.syntaxhighlighter .italic {
font-style: italic !important;
}
.syntaxhighlighter .line {
white-space: pre !important;
}
.syntaxhighlighter table {
width: 100% !important;
}
.syntaxhighlighter table caption {
text-align: left !important;
padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
width: 100% !important;
}
.syntaxhighlighter table td.code .container {
position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: white !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
text-align: right !important;
padding: 2px 0.5em 2px 1em !important;
}
.syntaxhighlighter table td.code .line {
padding: 2px 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
padding-left: 0em !important;
}
.syntaxhighlighter.show {
display: block !important;
}
.syntaxhighlighter.collapsed table {
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
padding: 0.1em 0.8em 0em 0.8em !important;
font-size: 1em !important;
position: static !important;
width: auto !important;
height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
display: inline !important;
margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
padding: 0 !important;
display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
display: inline !important;
}
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
display: inline !important;
}
.syntaxhighlighter .toolbar a {
display: block !important;
text-align: center !important;
text-decoration: none !important;
padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
display: none !important;
}
.syntaxhighlighter.ie {
font-size: .9em !important;
padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
background: none !important;
}
.syntaxhighlighter.printing .line .number {
color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
color: black !important;
}
.syntaxhighlighter.printing .toolbar {
display: none !important;
}
.syntaxhighlighter.printing a {
text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
color: blue !important;
}
.syntaxhighlighter.printing .keyword {
color: #006699 !important;
font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
color: gray !important;
}
.syntaxhighlighter.printing .variable {
color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
color: black !important;
}

View File

@@ -0,0 +1,128 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
.syntaxhighlighter {
background-color: white !important;
font-size: 14px !important;
overflow: visible !important;
}
.syntaxhighlighter .line.alt1 {
background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #F8F8F8 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
color: black !important;
}
.syntaxhighlighter table caption {
color: black !important;
}
.syntaxhighlighter .gutter {
}
.syntaxhighlighter .gutter div {
color: #5C5C5C !important;
width: 20px !important;
}
.syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter .gutter .line.alt2 {
background-color: white !important;
}
.odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter .gutter .line.alt2 {
background-color: #F2F2F2 !important;
}
.syntaxhighlighter .gutter .line {
border-right: 3px solid #4E6CA3 !important;
}
.syntaxhighlighter .gutter .line.highlighted {
background-color: #4E6CA3 !important;
color: white !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
color: blue !important;
background: white !important;
border: 1px solid #4E6CA3 !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: red !important;
}
.syntaxhighlighter .toolbar {
color: white !important;
background: #4E6CA3 !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: blue !important;
}
.syntaxhighlighter .keyword {
color: #006699 !important;
}
.syntaxhighlighter .preprocessor {
color: gray !important;
}
.syntaxhighlighter .variable {
color: #aa7700 !important;
}
.syntaxhighlighter .value {
color: #009900 !important;
}
.syntaxhighlighter .functions {
color: #ff1493 !important;
}
.syntaxhighlighter .constants {
color: #0066cc !important;
}
.syntaxhighlighter .script {
font-weight: bold !important;
color: #006699 !important;
background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: gray !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: red !important;
}
.syntaxhighlighter .keyword {
font-weight: bold !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 430 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1,121 @@
(function() {
var showingNav = true;
$(document).ready( function () {
var jqNav = $('div.fw_nav');
jqNav.css('right', ($(window).width() - $('div.fw_container').width()) /2);
var n = $('div.nav_blocker')[0];
n.style.height = $(jqNav).outerHeight()+"px";
n.style.width = ($(jqNav).outerWidth()+20)+"px";
SyntaxHighlighter.highlight();
$('#private_toggle').click( function () {
if ( $('input[name=show_private]').val() == 0 ) {
$('input[name=show_private]').val( 1 );
$('#private_label').html('Showing');
$('.private').css('display', 'block');
} else {
$('input[name=show_private]').val( 0 );
$('#private_label').html('Hiding');
$('.private').css('display', 'none');
}
fnWriteCookie();
return false;
} );
$('#extended_toggle').click( function () {
if ( $('input[name=show_extended]').val() == 0 ) {
$('input[name=show_extended]').val( 1 );
$('#extended_label').html('Showing');
$('.augmented').css('display', 'block');
} else {
$('input[name=show_extended]').val( 0 );
$('#extended_label').html('Hiding');
$('.augmented').css('display', 'none');
}
fnWriteCookie();
return false;
} );
var savedHeight = $(jqNav).height();
$('div.fw_nav h2').click( function () {
if ( showingNav ) {
$('div.fw_nav').animate( {
"height": 10,
"opacity": 0.3
} );
showingNav = false;
} else {
$('div.fw_nav').animate( {
"height": savedHeight,
"opacity": 1
} );
showingNav = true;
}
fnWriteCookie();
} );
var cookie = fnReadCookie( 'SpryMedia_JSDoc' );
if ( cookie != null ) {
var a = cookie.split('-');
if ( a[0] == 1 ) {
$('#private_toggle').click();
}
if ( a[1] == 0 ) {
$('#extended_toggle').click();
}
if ( a[2] == 'false' ) {
$('div.fw_nav').css('height', 10).css('opacity', 0.3);
showingNav = false;
}
}
} );
function fnWriteCookie()
{
var sVal =
$('input[name=show_private]').val()+'-'+
$('input[name=show_extended]').val()+'-'+
showingNav;
fnCreateCookie( 'SpryMedia_JSDoc', sVal );
}
function fnCreateCookie( sName, sValue )
{
var iDays = 365;
var date = new Date();
date.setTime( date.getTime()+(iDays*24*60*60*1000) );
var sExpires = "; expires="+date.toGMTString();
document.cookie = sName+"="+sValue+sExpires+"; path=/";
}
function fnReadCookie( sName )
{
var sNameEQ = sName + "=";
var sCookieContents = document.cookie.split(';');
for( var i=0 ; i<sCookieContents.length ; i++ ) {
var c = sCookieContents[i];
while (c.charAt(0)==' ') {
c = c.substring(1,c.length);
}
if (c.indexOf(sNameEQ) == 0) {
return c.substring(sNameEQ.length,c.length);
}
}
return null;
}
})();

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,52 @@
/**
* SyntaxHighlighter
* http://alexgorbatchev.com/SyntaxHighlighter
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/SyntaxHighlighter/donate.html
*
* @version
* 3.0.83 (July 02 2010)
*
* @copyright
* Copyright (C) 2004-2010 Alex Gorbatchev.
*
* @license
* Dual licensed under the MIT and GPL licenses.
*/
;(function()
{
// CommonJS
typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
function Brush()
{
var keywords = 'break case catch continue ' +
'default delete do else false ' +
'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with'
;
var r = SyntaxHighlighter.regexLib;
this.regexList = [
{ regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings
{ regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings
{ regex: r.singleLineCComments, css: 'comments' }, // one line comments
{ regex: r.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.forHtmlScript(r.scriptScriptTags);
};
Brush.prototype = new SyntaxHighlighter.Highlighter();
Brush.aliases = ['js', 'jscript', 'javascript'];
SyntaxHighlighter.brushes.JScript = Brush;
// CommonJS
typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,20 @@
Copyright (c) 2003, 2004 Jim Weirich
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,34 @@
/*
* File: ColVis.min.js
* Version: 1.0.8
* Author: Allan Jardine (www.sprymedia.co.uk)
*
* Copyright 2010-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.
*/
(function(d){ColVis=function(a,b){(!this.CLASS||"ColVis"!=this.CLASS)&&alert("Warning: ColVis must be initialised with the keyword 'new'");"undefined"==typeof b&&(b={});this.s={dt:null,oInit:b,fnStateChange:null,activate:"click",sAlign:"left",buttonText:"Show / hide columns",hidden:!0,aiExclude:[],abOriginal:[],bShowAll:!1,sShowAll:"Show All",bRestore:!1,sRestore:"Restore original",iOverlayFade:500,fnLabel:null,sSize:"auto",bCssPosition:!1};this.dom={wrapper:null,button:null,collection:null,background:null,
catcher:null,buttons:[],restore:null};ColVis.aInstances.push(this);this.s.dt=a;this._fnConstruct();return this};ColVis.prototype={fnRebuild:function(){for(var a=this.dom.buttons.length-1;0<=a;a--)null!==this.dom.buttons[a]&&this.dom.collection.removeChild(this.dom.buttons[a]);this.dom.buttons.splice(0,this.dom.buttons.length);this.dom.restore&&this.dom.restore.parentNode(this.dom.restore);this._fnAddButtons();this._fnDrawCallback()},_fnConstruct:function(){this._fnApplyCustomisation();var a=this,
b,c;this.dom.wrapper=document.createElement("div");this.dom.wrapper.className="ColVis TableTools";this.dom.button=this._fnDomBaseButton(this.s.buttonText);this.dom.button.className+=" ColVis_MasterButton";this.dom.wrapper.appendChild(this.dom.button);this.dom.catcher=this._fnDomCatcher();this.dom.collection=this._fnDomCollection();this.dom.background=this._fnDomBackground();this._fnAddButtons();b=0;for(c=this.s.dt.aoColumns.length;b<c;b++)this.s.abOriginal.push(this.s.dt.aoColumns[b].bVisible);this.s.dt.aoDrawCallback.push({fn:function(){a._fnDrawCallback.call(a)},
sName:"ColVis"});d(this.s.dt.oInstance).bind("column-reorder",function(d,g,f){b=0;for(c=a.s.aiExclude.length;b<c;b++)a.s.aiExclude[b]=f.aiInvertMapping[a.s.aiExclude[b]];d=a.s.abOriginal.splice(f.iFrom,1)[0];a.s.abOriginal.splice(f.iTo,0,d);a.fnRebuild()})},_fnApplyCustomisation:function(){var a=this.s.oInit;"undefined"!=typeof a.activate&&(this.s.activate=a.activate);"undefined"!=typeof a.buttonText&&(this.s.buttonText=a.buttonText);"undefined"!=typeof a.aiExclude&&(this.s.aiExclude=a.aiExclude);
"undefined"!=typeof a.bRestore&&(this.s.bRestore=a.bRestore);"undefined"!=typeof a.sRestore&&(this.s.sRestore=a.sRestore);"undefined"!=typeof a.bShowAll&&(this.s.bShowAll=a.bShowAll);"undefined"!=typeof a.sShowAll&&(this.s.sShowAll=a.sShowAll);"undefined"!=typeof a.sAlign&&(this.s.sAlign=a.sAlign);"undefined"!=typeof a.fnStateChange&&(this.s.fnStateChange=a.fnStateChange);"undefined"!=typeof a.iOverlayFade&&(this.s.iOverlayFade=a.iOverlayFade);"undefined"!=typeof a.fnLabel&&(this.s.fnLabel=a.fnLabel);
"undefined"!=typeof a.sSize&&(this.s.sSize=a.sSize);"undefined"!=typeof a.bCssPosition&&(this.s.bCssPosition=a.bCssPosition)},_fnDrawCallback:function(){for(var a=this.s.dt.aoColumns,b=0,c=a.length;b<c;b++)null!==this.dom.buttons[b]&&(a[b].bVisible?d("input",this.dom.buttons[b]).attr("checked","checked"):d("input",this.dom.buttons[b]).removeAttr("checked"))},_fnAddButtons:function(){for(var a,b=","+this.s.aiExclude.join(",")+",",c=0,d=this.s.dt.aoColumns.length;c<d;c++)-1==b.indexOf(","+c+",")?(a=
this._fnDomColumnButton(c),this.dom.buttons.push(a),this.dom.collection.appendChild(a)):this.dom.buttons.push(null);this.s.bRestore&&(a=this._fnDomRestoreButton(),a.className+=" ColVis_Restore",this.dom.buttons.push(a),this.dom.collection.appendChild(a));this.s.bShowAll&&(a=this._fnDomShowAllButton(),a.className+=" ColVis_ShowAll",this.dom.buttons.push(a),this.dom.collection.appendChild(a))},_fnDomRestoreButton:function(){var a=this,b=document.createElement("button"),c=document.createElement("span");
b.className=!this.s.dt.bJUI?"ColVis_Button TableTools_Button":"ColVis_Button TableTools_Button ui-button ui-state-default";b.appendChild(c);d(c).html('<span class="ColVis_title">'+this.s.sRestore+"</span>");d(b).click(function(){for(var b=0,c=a.s.abOriginal.length;b<c;b++)a.s.dt.oInstance.fnSetColumnVis(b,a.s.abOriginal[b],!1);a._fnAdjustOpenRows();a.s.dt.oInstance.fnAdjustColumnSizing(!1);a.s.dt.oInstance.fnDraw(!1)});return b},_fnDomShowAllButton:function(){var a=this,b=document.createElement("button"),
c=document.createElement("span");b.className=!this.s.dt.bJUI?"ColVis_Button TableTools_Button":"ColVis_Button TableTools_Button ui-button ui-state-default";b.appendChild(c);d(c).html('<span class="ColVis_title">'+this.s.sShowAll+"</span>");d(b).click(function(){for(var b=0,c=a.s.abOriginal.length;b<c;b++)-1===a.s.aiExclude.indexOf(b)&&a.s.dt.oInstance.fnSetColumnVis(b,!0,!1);a._fnAdjustOpenRows();a.s.dt.oInstance.fnAdjustColumnSizing(!1);a.s.dt.oInstance.fnDraw(!1)});return b},_fnDomColumnButton:function(a){var b=
this,c=this.s.dt.aoColumns[a],e=document.createElement("button"),g=document.createElement("span"),f=this.s.dt;e.className=!f.bJUI?"ColVis_Button TableTools_Button":"ColVis_Button TableTools_Button ui-button ui-state-default";e.appendChild(g);c=null===this.s.fnLabel?c.sTitle:this.s.fnLabel(a,c.sTitle,c.nTh);d(g).html('<span class="ColVis_radio"><input type="checkbox"/></span><span class="ColVis_title">'+c+"</span>");d(e).click(function(c){var e=!d("input",this).is(":checked");"input"==c.target.nodeName.toLowerCase()&&
(e=d("input",this).is(":checked"));c=d.fn.dataTableExt.iApiIndex;d.fn.dataTableExt.iApiIndex=b._fnDataTablesApiIndex.call(b);f.oFeatures.bServerSide&&(""!==f.oScroll.sX||""!==f.oScroll.sY)?(b.s.dt.oInstance.fnSetColumnVis(a,e,!1),b.s.dt.oInstance.fnAdjustColumnSizing(!1),b.s.dt.oInstance.oApi._fnScrollDraw(b.s.dt),b._fnDrawCallback()):b.s.dt.oInstance.fnSetColumnVis(a,e);d.fn.dataTableExt.iApiIndex=c;null!==b.s.fnStateChange&&b.s.fnStateChange.call(b,a,e)});return e},_fnDataTablesApiIndex:function(){for(var a=
0,b=this.s.dt.oInstance.length;a<b;a++)if(this.s.dt.oInstance[a]==this.s.dt.nTable)return a;return 0},_fnDomBaseButton:function(a){var b=this,c=document.createElement("button"),e=document.createElement("span"),g="mouseover"==this.s.activate?"mouseover":"click";c.className=!this.s.dt.bJUI?"ColVis_Button TableTools_Button":"ColVis_Button TableTools_Button ui-button ui-state-default";c.appendChild(e);e.innerHTML=a;d(c).bind(g,function(a){b._fnCollectionShow();a.preventDefault()});return c},_fnDomCollection:function(){var a=
document.createElement("div");a.style.display="none";a.className=!this.s.dt.bJUI?"ColVis_collection TableTools_collection":"ColVis_collection TableTools_collection ui-buttonset ui-buttonset-multi";this.s.bCssPosition||(a.style.position="absolute");d(a).css("opacity",0);return a},_fnDomCatcher:function(){var a=this,b=document.createElement("div");b.className="ColVis_catcher TableTools_catcher";d(b).click(function(){a._fnCollectionHide.call(a,null,null)});return b},_fnDomBackground:function(){var a=
this,b=document.createElement("div");b.style.position="absolute";b.style.left="0px";b.style.top="0px";b.className="ColVis_collectionBackground TableTools_collectionBackground";d(b).css("opacity",0);d(b).click(function(){a._fnCollectionHide.call(a,null,null)});"mouseover"==this.s.activate&&d(b).mouseover(function(){a.s.overcollection=!1;a._fnCollectionHide.call(a,null,null)});return b},_fnCollectionShow:function(){var a=this,b,c;b=d(this.dom.button).offset();var e=this.dom.collection,g=this.dom.background,
f=parseInt(b.left,10),h=parseInt(b.top+d(this.dom.button).outerHeight(),10);this.s.bCssPosition||(e.style.top=h+"px",e.style.left=f+"px");e.style.display="block";d(e).css("opacity",0);c=d(window).height();var i=d(document).height(),j=d(window).width(),h=d(document).width();g.style.height=(c>i?c:i)+"px";g.style.width=(j<h?j:h)+"px";c=this.dom.catcher.style;c.height=d(this.dom.button).outerHeight()+"px";c.width=d(this.dom.button).outerWidth()+"px";c.top=b.top+"px";c.left=f+"px";document.body.appendChild(g);
document.body.appendChild(e);document.body.appendChild(this.dom.catcher);if("auto"==this.s.sSize){i=[];this.dom.collection.style.width="auto";b=0;for(c=this.dom.buttons.length;b<c;b++)null!==this.dom.buttons[b]&&(this.dom.buttons[b].style.width="auto",i.push(d(this.dom.buttons[b]).outerWidth()));iMax=Math.max.apply(window,i);b=0;for(c=this.dom.buttons.length;b<c;b++)null!==this.dom.buttons[b]&&(this.dom.buttons[b].style.width=iMax+"px");this.dom.collection.style.width=iMax+"px"}this.s.bCssPosition||
(e.style.left="left"==this.s.sAlign?f+"px":f-d(e).outerWidth()+d(this.dom.button).outerWidth()+"px",b=d(e).outerWidth(),d(e).outerHeight(),f+b>h&&(e.style.left=h-b+"px"));setTimeout(function(){d(e).animate({opacity:1},a.s.iOverlayFade);d(g).animate({opacity:0.1},a.s.iOverlayFade,"linear",function(){jQuery.browser.msie&&jQuery.browser.version=="6.0"&&a._fnDrawCallback()})},10);this.s.hidden=!1},_fnCollectionHide:function(){var a=this;!this.s.hidden&&null!==this.dom.collection&&(this.s.hidden=!0,d(this.dom.collection).animate({opacity:0},
a.s.iOverlayFade,function(){this.style.display="none"}),d(this.dom.background).animate({opacity:0},a.s.iOverlayFade,function(){document.body.removeChild(a.dom.background);document.body.removeChild(a.dom.catcher)}))},_fnAdjustOpenRows:function(){for(var a=this.s.dt.aoOpenRows,b=this.s.dt.oApi._fnVisbleColumns(this.s.dt),c=0,d=a.length;c<d;c++)a[c].nTr.getElementsByTagName("td")[0].colSpan=b}};ColVis.fnRebuild=function(a){var b=null;"undefined"!=typeof a&&(b=a.fnSettings().nTable);for(var c=0,d=ColVis.aInstances.length;c<
d;c++)("undefined"==typeof a||b==ColVis.aInstances[c].s.dt.nTable)&&ColVis.aInstances[c].fnRebuild()};ColVis.aInstances=[];ColVis.prototype.CLASS="ColVis";ColVis.VERSION="1.0.8";ColVis.prototype.VERSION=ColVis.VERSION;"function"==typeof d.fn.dataTable&&"function"==typeof d.fn.dataTableExt.fnVersionCheck&&d.fn.dataTableExt.fnVersionCheck("1.7.0")?d.fn.dataTableExt.aoFeatures.push({fnInit:function(a){return(new ColVis(a,"undefined"==typeof a.oInit.oColVis?{}:a.oInit.oColVis)).dom.wrapper},cFeature:"C",
sFeature:"ColVis"}):alert("Warning: ColVis requires DataTables 1.7 or greater - www.datatables.net/download")})(jQuery);

View File

@@ -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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"activate": "mouseover"
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example - mouse over activation
</div>
<h1>Preamble</h1>
<p>The default activation (showing the columns list) for ColVis is for the user to click
the button. This can be altered to a 'mouseover' activation by making use of the
oColVis.activate DataTables initialisation value and setting it to "mouseover". This is
shown in the example below.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip',
"oColVis": {
"activate": "mouseover"
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,532 @@
<!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>ColVis 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/ColVisAlt.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": '<"H"fr>tC<"F"ip>',
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "200px",
"bScrollCollapse": true,
"bScrollAutoCss": false,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oColVis": {
"buttonText": "&nbsp;",
"bRestore": true,
"sAlign": "right"
},
"fnDrawCallback": function (o) {
/* Position the ColVis button as needed */
var nColVis = $('div.ColVis', o.nTableWrapper)[0];
nColVis.style.width = o.oScroll.iBarWidth+"px";
nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+"px";
nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+"px";
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example with alternative styling
</div>
<h1>Preamble</h1>
<p>This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a "Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the "bRestore" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.</p>
<p>Note that this demo requires DataTables 1.7.5 or later.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": '&lt;"H"fr&gt;tC&lt;"F"ip&gt;',
"bJQueryUI": true,
"bPaginate": false,
"sScrollY": "200px",
"bScrollCollapse": true,
"bScrollAutoCss": false,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oColVis": {
"buttonText": "&amp;nbsp;",
"bRestore": true,
"sAlign": "left"
},
"fnDrawCallback": function (o) {
/* Position the ColVis button as needed */
var nColVis = $('div.ColVis', o.nTableWrapper)[0];
nColVis.style.width = o.oScroll.iBarWidth+"px";
nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+"px";
nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+"px";
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,497 @@
<!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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"buttonText": "Change columns"
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example - custom text
</div>
<h1>Preamble</h1>
<p>You may wish to use your own text in the ColVis button - this is done by making use of
the oColVis.buttonText DataTables initialisation parameter, as shown in this example.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip',
"oColVis": {
"buttonText": "Change columns"
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -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>ColVis 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/ColVis.css";
.ColVis {
float: left;
margin-bottom: 0
}
.dataTables_length {
width: auto;
}
</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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": '<"H"Cfr>t<"F"ip>',
"bJQueryUI": true
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example with jQuery theming
</div>
<h1>Preamble</h1>
<p>ColVis will automatically add the classes required for theming with jQuery UI ThemeRoller
when enabled in DataTables. This example also shows a slightly altered position for the
ColVis button from the other example, in that it is included in the table toolbar. This
is achieved by simply moving the 'C' character in sDom.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": '&lt;"H"Cfr&gt;t&lt;"F"ip&gt;',
"bJQueryUI": true
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,500 @@
<!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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"fnLabel": function ( index, title, th ) {
return (index+1) +'. '+ title;
}
}
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example
</div>
<h1>Preamble</h1>
<p>By default ColVis will use the information in the TH cell for each column as the button name to use in ColVis, which might not always be what you want (for example you might has HTML in the cell that you don't want in the button). The <i>fnLabel</i> callback provides the ability to customise the label used for the button. In this example the column index is prefixed to the column title.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip',
"oColVis": {
"fnLabel": function ( index, title, th ) {
return (index+1) +'. '+ title;
}
}
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('table').dataTable( {
"sDom": 'C<"clear">lfrtip'
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example - two tables with individual controls
</div>
<h1>Preamble</h1>
<p>It can be useful to have DataTables initialise more than one table with a single call can for them to each have individual ColVis controllers. All this requires is a suitable jQuery selector to be used, and DataTables and ColVis will take care of the rest - as shown in this example.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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: &amp;)</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 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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
$('table').dataTable( {
"sDom": 'C&lt;"clear"&gt;lfrtip'
} );
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,322 @@
<!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>ColVis example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "media/css/ColVis.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/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var oTables = $('table').dataTable( {
"sDom": 'lfrtip'
} );
var oColVis = new ColVis( oTables.fnSettings(), {
"fnStateChange": function ( iColumn, bVisible ) {
var jqTables = $('table:not(#example)'); // ColVis will do #example
for ( var i=0, iLen=jqTables.length ; i<iLen ; i++ ) {
$(jqTables[i]).dataTable().fnSetColumnVis( iColumn, bVisible );
}
}
} );
document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
oColVis.fnRebuild();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
ColVis example - two tables with shared control
</div>
<h1>Preamble</h1>
<p>This example shows how the API that ColVis presents can be used to control the column visibility of two tables with a single instance of ColVis. The result is that changing a button state will effect all tables on the page. This can be useful when looking at multiple tables which have the same column structure.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<div id="buttonInsert">
</div>
<table 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: &amp;)</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 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>
</form>
<div class="spacer"></div>
<h1>Examples</h1>
<ul>
<li><a href="index.html">Basic initialisation</a></li>
<li><a href="mouseover.html">Activate with a mouseover rather than click</a></li>
<li><a href="text.html">Custom text in the button</a></li>
<li><a href="theme.html">Using with jQuery UI ThemeRoller</a></li>
<li><a href="exclude_columns.html">Excluding columns from the show / hide list</a></li>
<li><a href="two_tables.html">Two tables initialised together - individual controls</a></li>
<li><a href="two_tables_identical.html">Two tables initialised together - shared control</a></li>
<li><a href="style.html">Alternative styling and reset to original</a></li>
<li><a href="title_callback.html">Customisation of the button label with a callback</a></li>
</ul>
<h1>Initialisation code</h1>
<pre>$(document).ready( function () {
var oTables = $('table').dataTable( {
"sDom": 'lfrtip'
} );
var oColVis = new ColVis( oTables.fnSettings() );
$(oColVis).bind('stateChange', function (e, data) {
var jqTables = $('table:not(#example)');
for ( var i=0, iLen=jqTables.length ; i&lt;iLen ; i++ ) {
$(jqTables[i]).dataTable().fnSetColumnVis( data.iColumn, data.bVisible );
}
} );
document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
oColVis.fnRebuild();
} );</pre>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
ColVis and DataTables &copy; Allan Jardine 2009-2010
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,613 @@
<!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>ColReorder example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
thead input { width: 100% }
input.search_init { color: #999 }
</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/FixedColumns.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable;
/* Use the elements to store their own index */
$("thead input").each( function (i) {
this.visibleIndex = i;
} );
$("thead input").keyup( function () {
/* If there is no visible index then we are in the cloned node */
var visIndex = typeof this.visibleIndex == 'undefined' ? 0 : this.visibleIndex;
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, visIndex );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"sDom": 'C<"clear">lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
new FixedColumns( oTable );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
FixedColumns example - individual column filtering
</div>
<h1>Preamble</h1>
<p>This example shows a fairly complex example of FixedColumns in action. Primarily it shows
how multiple rows can be used in the THEAD or TFOOT element of the table such that you can
provide extra information. In this case it shows how a column filter could be implemented.</p>
<h1>Live example</h1>
<form>
<div id="demo">
<table 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>
<tr>
<td><input type="text" name="search_engine" value="Search engines" class="search_init" /></td>
<td><input type="text" name="search_browser" value="Search browsers" class="search_init" /></td>
<td><input type="text" name="search_platform" value="Search platforms" class="search_init" /></td>
<td><input type="text" name="search_version" value="Search versions" class="search_init" /></td>
<td><input type="text" name="search_grade" value="Search grades" class="search_init" /></td>
</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: &amp;)</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</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>
</form>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
var oTable;
/* Use the elements to store their own index */
$("thead input").each( function (i) {
this.visibleIndex = i;
} );
$("thead input").keyup( function () {
/* If there is no visible index then we are in the cloned node */
var visIndex = typeof this.visibleIndex == 'undefined' ? 0 : this.visibleIndex;
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, visIndex );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes
*/
$("thead input").each( function (i) {
this.initVal = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.initVal;
}
} );
oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"sDom": 'C&lt;"clear"&gt;lfrtip',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 2 ] }
],
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
new FixedColumns( oTable );
} );</pre>
<h1>Documentation</h1>
<ul>
<li><a href="http://datatables.net/extras/fixedcolumns">Usage</a></li>
<li><a href="http://datatables.net/docs/FixedColumns">API / parameters</a></li>
</ul>
<h1>Basic examples</h1>
<ul>
<li><a href="index.html">Basic demo of FixedColumns with zero initialisation</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
<li><a href="index_column.html">Index column attached to side of the table</a></li>
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="css_size.html">Speeding up row height matching with CSS</a></li>
<li><a href="themed.html">jQuery UI themed table with FixedColumns</a></li>
</ul>
<h1>Advanced examples</h1>
<ul>
<li><a href="rowspan.html">Using ROWSPAN with FixedColumns</a></li>
<li><a href="server-side-processing.html">Server-side processing with FixedColumns</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="scale_fixed.html">Setting the fixed column width and resizing the table</a></li>
<li><a href="scale_relative.html">Setting the fixed column width with relative sizing</a></li>
<li><a href="row_grouping_height.html">Row grouping by grouping like rows in the fixed column</a></li>
<li><a href="row_grouping.html">Row grouping by inserting a grouping row</a></li>
<ul>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
FixedColumns and DataTables &copy; Allan Jardine 2011.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,528 @@
<!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>FixedColumns example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
tr { height: 50px; }
</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/FixedColumns.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
var iStart = new Date().getTime();
var oTable = $('#example').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": false
} );
new FixedColumns( oTable, {
"sHeightMatch": "none"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
FixedColumns example - CSS row sizing
</div>
<h1>Preamble</h1>
<p>Because of the method FixedColumns uses to display the fixed columns, an important consideration is the alignment of the rows due to different heights in the individual rows of the table. There are two different algorithms in FixedColumns which can be used, or you can switch off automatic row sizing all together. This is controlled through the <i>sHeightMatch</i> parameter. If can take the following values:</p>
<ul>
<li>"none" - no automatic row height matching is performed. CSS can be used in this case and is useful when speed is of primary importance.</li>
<li>"semiauto" (default) - the height calculation will be performed once, and the result cached to be used again (fnRecalculateHeight can be used to force recalculation)</li>
<li>"auto" - height matching is performed on every draw (slowest but must accurate)</li>
</ul>
<p>This example shows row height matching switched off but there is a CSS statement of tr { height: 50px } to force all rows to the same height.</p>
<h1>Live example</h1>
<div id="demo">
<table 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="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="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="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="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="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="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="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 <br>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>
<tr class="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="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="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="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="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="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="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="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="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="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="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="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="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="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="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A</td>
</tr>
<tr class="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="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="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="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="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="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="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="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="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="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="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="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="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( {
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable );
} );</pre>
<h1>Documentation</h1>
<ul>
<li><a href="http://datatables.net/extras/fixedcolumns">Usage</a></li>
<li><a href="http://datatables.net/docs/FixedColumns">API / parameters</a></li>
</ul>
<h1>Basic examples</h1>
<ul>
<li><a href="index.html">Basic demo of FixedColumns with zero initialisation</a></li>
<li><a href="left_right_columns.html">Fix the left and right columns in place</a></li>
<li><a href="index_column.html">Index column attached to side of the table</a></li>
<li><a href="x_y_scrolling.html">Index column, but with Y scrolling and no pagination</a></li>
<li><a href="two_columns.html">Two columns fixed in place</a></li>
<li><a href="right_column.html">Fix the right column in place</a></li>
<li><a href="css_size.html">Speeding up row height matching with CSS</a></li>
<li><a href="themed.html">jQuery UI themed table with FixedColumns</a></li>
</ul>
<h1>Advanced examples</h1>
<ul>
<li><a href="rowspan.html">Using ROWSPAN with FixedColumns</a></li>
<li><a href="server-side-processing.html">Server-side processing with FixedColumns</a></li>
<li><a href="col_filter.html">Individual column filtering</a></li>
<li><a href="scale_fixed.html">Setting the fixed column width and resizing the table</a></li>
<li><a href="scale_relative.html">Setting the fixed column width with relative sizing</a></li>
<li><a href="row_grouping_height.html">Row grouping by grouping like rows in the fixed column</a></li>
<li><a href="row_grouping.html">Row grouping by inserting a grouping row</a></li>
<ul>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
FixedColumns and DataTables &copy; Allan Jardine 2011.<br>
</span>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!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">
<title>Namespace: left - documentation</title>
<style type="text/css" media="screen">
@import "media/css/doc.css";
@import "media/css/shCore.css";
@import "media/css/shThemeDataTables.css";
</style>
<script type="text/javascript" src="media/js/shCore.js"></script>
<script type="text/javascript" src="media/js/shBrushJScript.js"></script>
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/doc.js"></script>
</head>
<body>
<div class="fw_container">
<a name="top"></a>
<div class="fw_header">
<h1 class="page-title">Namespace: left</h1>
<h2 class="ancestors">Ancestry: <span class="ancestors"><a href="FixedColumns.html">FixedColumns</a> » <a href="d3890ba7c4.html">#dom</a> » <a href="526f872207.html">.grid</a>.</span> » left</h2>
<div class="page-info">
FixedColumns v2.0.3 documentation
</div>
</div>
<div class="fw_nav">
<h2>Navigation</h2>
<ul>
<li><a href="#top">Overview</a></li>
<li><a href="#summary">Summary</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Classes (0)</td><td>Namespaces (0)</td></tr><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li><li><a href="#details">Details</a><div><table cellpadding="5" border="0" cellspacing="0" width="100%"><tbody><tr><td>Properties (0)</td><td>Static properties (0)</td></tr><tr><td>Methods (0)</td><td>Static methods (0)</td></tr><tr><td>Events (0)</td><td></td></tr></tbody></table></div></li></ul>
<div style="margin-top: 10px;">
<input type="hidden" name="show_private" value="0">
<span id="private_label">Hiding</span> private elements
(<a id="private_toggle" href="">toggle</a>)
</span>
</div>
<div>
<input type="hidden" name="show_extended" value="1">
<span id="extended_label">Showing</span> extended elements
(<a id="extended_toggle" href="">toggle</a>)
</span>
</div>
</div>
<div class="fw_content">
<a name="overview"></a>
<div class="doc_overview">
<div class="nav_blocker"></div>
<p>Left fixed column grid components</p><dl class="details">
</dl>
</div>
</div>
<div class="fw_footer">
FixedColumns: Copyright 2010-2011 Allan Jardine, all rights reserved<br>
Documentation generated by <a href="https://github.com/micmath/JSDoc">JSDoc 3</a> on
23th Sep 2012 - 14:27
with the <a href="http://datatables.net/">DataTables</a> template.
</div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More