246 lines
13 KiB
HTML
246 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery tablesorter 2.0 - Dragtable Mod (beta)</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="js/jquery-latest.min.js"></script>
|
||
|
|
<script src="js/jquery-ui.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||
|
|
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||
|
|
<link rel="stylesheet" href="css/jq.css">
|
||
|
|
<link href="css/prettify.css" rel="stylesheet">
|
||
|
|
<script src="js/prettify.js"></script>
|
||
|
|
<script src="js/docs.js"></script>
|
||
|
|
<style>
|
||
|
|
/* override jQuery UI overriding Bootstrap */
|
||
|
|
.accordion .ui-widget-content a {
|
||
|
|
color: #337ab7;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Tablesorter: theme -->
|
||
|
|
<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
|
||
|
|
<link rel="stylesheet" href="../css/dragtable.mod.css">
|
||
|
|
|
||
|
|
<!-- Tablesorter script: required -->
|
||
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
||
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||
|
|
|
||
|
|
<script src="../js/extras/jquery.dragtable.mod.js"></script>
|
||
|
|
|
||
|
|
<style id="css">/* optional styling */
|
||
|
|
caption {
|
||
|
|
/* override bootstrap adding 8px to the top & bottom of the caption */
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.ui-sortable-placeholder {
|
||
|
|
/* change placeholder (seen while dragging) background color */
|
||
|
|
background: #ddd;
|
||
|
|
}
|
||
|
|
div.table-handle-disabled {
|
||
|
|
/* optional red background color indicating a disabled drag handle */
|
||
|
|
background-color: rgba(255,128,128,0.5);
|
||
|
|
/* opacity set to zero for disabled handles in the dragtable.mod.css file */
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
/* fix cursor */
|
||
|
|
.tablesorter-blue .tablesorter-header {
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.sorter {
|
||
|
|
cursor: pointer;
|
||
|
|
}</style>
|
||
|
|
<script id="js">$(function () {
|
||
|
|
$('table')
|
||
|
|
// initialize dragtable FIRST!
|
||
|
|
.dragtable({
|
||
|
|
// *** new dragtable mod options ***
|
||
|
|
// this option MUST match the tablesorter selectorSort option!
|
||
|
|
sortClass: '.sorter',
|
||
|
|
// this function is called after everything has been updated
|
||
|
|
tablesorterComplete: function(table) {},
|
||
|
|
|
||
|
|
// *** original dragtable settings (non-default) ***
|
||
|
|
dragaccept: '.drag-enable', // class name of draggable cols -> default null = all columns draggable
|
||
|
|
|
||
|
|
// *** original dragtable settings (default values) ***
|
||
|
|
revert: false, // smooth revert
|
||
|
|
dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
|
||
|
|
maxMovingRows: 40, // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
|
||
|
|
excludeFooter: false, // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
|
||
|
|
onlyHeaderThreshold: 100, // TODO: not implemented yet, switch automatically between entire col moving / only header moving
|
||
|
|
persistState: null, // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
|
||
|
|
restoreState: null, // JSON-Object or function: some kind of experimental aka Quick-Hack TODO: do it better
|
||
|
|
exact: true, // removes pixels, so that the overlay table width fits exactly the original table width
|
||
|
|
clickDelay: 10, // ms to wait before rendering sortable list and delegating click event
|
||
|
|
containment: null, // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
|
||
|
|
cursor: 'move', // @see http://api.jqueryui.com/sortable/#option-cursor
|
||
|
|
cursorAt: false, // @see http://api.jqueryui.com/sortable/#option-cursorAt
|
||
|
|
distance: 0, // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
|
||
|
|
tolerance: 'pointer', // @see http://api.jqueryui.com/sortable/#option-tolerance
|
||
|
|
axis: 'x', // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
|
||
|
|
beforeStart: $.noop, // returning FALSE will stop the execution chain.
|
||
|
|
beforeMoving: $.noop,
|
||
|
|
beforeReorganize: $.noop,
|
||
|
|
beforeStop: $.noop
|
||
|
|
})
|
||
|
|
// initialize tablesorter
|
||
|
|
.tablesorter({
|
||
|
|
theme: 'blue',
|
||
|
|
// this option MUST match the dragtable sortClass option!
|
||
|
|
selectorSort: '.sorter',
|
||
|
|
widgets: ['zebra', 'filter', 'columns']
|
||
|
|
});
|
||
|
|
});</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="banner">
|
||
|
|
<h1>table<em>sorter</em></h1>
|
||
|
|
<h2>Dragtable Mod (beta)</h2>
|
||
|
|
<h3>Flexible client-side table sorting</h3>
|
||
|
|
<a href="index.html">Back to documentation</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
<p></p>
|
||
|
|
<br>
|
||
|
|
<div id="root" class="accordion">
|
||
|
|
|
||
|
|
<h3 id="notes"><a href="#">Notes</a></h3>
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li>This demo uses a modified version of the <a href="http://akottr.github.io/dragtable/">jQuery UI Dragtable widget</a> (beta) to work with tablesorter.</li>
|
||
|
|
<li>This mod <strong>has been</strong> tested with the following widgets: <span class="good">alignChar</span>, <span class="good">columns</span>, <span class="good">cssStickyHeaders</span>, <span class="good">editable</span>, <span class="good">filter</span>, <span class="good">grouping</span>, <span class="good">headerTitles</span>, <span class="good">math</span>, <span class="good">output</span>, <span class="good">pager</span> <span class="good">print</span>, <span class="good">reflow</span>, <span class="good">resizable</span>, <span class="good">repeatHeaders</span>, <span class="good">staticRow</span>, <span class="good">uitheme</span> & <span class="good">zebra</span>.</li>
|
||
|
|
<li>This mod <strong><em>does not</em></strong> currently work with the following widgets:
|
||
|
|
<ul>
|
||
|
|
<li><span class="bad">chart</span> - needs more work to be compatible.</li>
|
||
|
|
<li><span class="bad">columnSelector</span> - needs more work - making this compatible will require significant changes to the dragtable core.</li>
|
||
|
|
<li><span class="bad">saveSort</span> - this saves the newly moved sorted column properly, but on page reload the column order is restored so it sorts the incorrect column.</li>
|
||
|
|
<li><span class="bad">scroller</span> - way too much work to make this compatible.</li>
|
||
|
|
<li><span class="bad">stickyHeaders</span> - needs more work - can't get the drag handle in the cloned sticky header from passing the mousedown on to the original drag handle.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Any widgets not listed above can be assumed to be incompatible, for now.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 id="setup"><a href="#">Tablesorter setup</a></h3>
|
||
|
|
<div>
|
||
|
|
A complete javascript example can be found in the demo section, below the table.
|
||
|
|
<p></p>
|
||
|
|
To use this mod:
|
||
|
|
<ul>
|
||
|
|
<li>Initialize the dragtable mod script first, then initialize tablesorter.</li>
|
||
|
|
<li><span class="label label-warning">Warning!</span> When setting up the initialization code, make sure that the dragtable <code>sortClass</code> option <em>exactly matches</em> the tablesorter <code>selectorSort</code> option, or the table will be unsortable.
|
||
|
|
<pre class="prettyprint lang-js">$('table')
|
||
|
|
.dragtable({ sortClass: '.sorter' }) // this is already the default value
|
||
|
|
.tablesorter({ selectorSort: '.sorter' }); // this default value is 'th, td'</pre></li>
|
||
|
|
<li><span class="label warning">Warning!</span> Do not reference a column using jQuery data (e.g. <code>$('th:contains(Name)').data('sorter', 'text');</code>) or by it's zero-based index<sup class="bright">(1)</sup> because these references do not get updated after a column move!
|
||
|
|
<p></p>
|
||
|
|
Instead, use one of the following methods (these examples set the column parser):
|
||
|
|
<h4>Set parser by data-attribute or header class</h4>
|
||
|
|
<pre class="prettyprint lang-html"><tr>
|
||
|
|
<th class="col-id" data-sorter="digit">...</th> <!-- parser set by data-attribute -->
|
||
|
|
<th class="col-name drag-enable sorter-text">...</th> <!-- parser set by header class -->
|
||
|
|
<th class="col-date drag-enable">...</th> <!-- parser set by headers option (see below) -->
|
||
|
|
</tr></pre>
|
||
|
|
<h4>Or, set parser by <code>headers</code> option</h4>
|
||
|
|
<pre class="prettyprint lang-js">$('table').tablesorter({
|
||
|
|
headers : {
|
||
|
|
'.col-date' : { sorter : 'shortDate' }
|
||
|
|
}
|
||
|
|
});</pre></li>
|
||
|
|
<li>In order to get dragtable to work, the mod will add a div to act as a dragable handle and wrap the header text in a div<sup class="bright">(2)</sup> which needs to be targeted by the <code>selectorSort</code> option to make it clickable for sorting.
|
||
|
|
<p></p>
|
||
|
|
The <em>resulting HTML</em> may look like this:
|
||
|
|
<pre class="prettyprint lang-html"><tr>
|
||
|
|
<th class="col-id" data-sorter="digit">
|
||
|
|
<div class="table-handle-disabled"></div>
|
||
|
|
<!-- clicking on the "sort" wrapper below will not trigger a sort, because the cell is not set to sort -->
|
||
|
|
<div class="sorter">9999</div>
|
||
|
|
</th>
|
||
|
|
<th class="col-name sorter-text drag-enable">
|
||
|
|
<div class="table-handle"></div>
|
||
|
|
<div class="sorter">Name</div>
|
||
|
|
</th>
|
||
|
|
<th class="col-date drag-enable">
|
||
|
|
<div class="table-handle"></div>
|
||
|
|
<div class="sorter">1/1/2015</div>
|
||
|
|
</th>
|
||
|
|
</tr></pre>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<span class="bright">(1)</span> Options that use a column index (such as the <code>sortList</code>), or an array of settings (like the <code>resizable_widths</code> option) are updated internally by the mod.
|
||
|
|
<p></p>
|
||
|
|
<span class="bright">(2)</span> The class name for the dragable handle is set by the dragtable <code>dragHandle</code> option & the class name for the clickable div wrapping the header text is set by the dragtable <code>sortClass</code> option.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Demo</h1>
|
||
|
|
<div id="demo"><table class="tablesorter">
|
||
|
|
<caption>Student Grades</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Name (0)</th> <!-- disable dragtable on this column -->
|
||
|
|
<th class="drag-enable">Major (1)</th>
|
||
|
|
<th class="drag-enable">Sex (2)</th>
|
||
|
|
<th class="drag-enable">English (3)</th>
|
||
|
|
<th class="drag-enable">Japanese (4)</th>
|
||
|
|
<th class="drag-enable">Calculus (5)</th>
|
||
|
|
<th class="drag-enable">Geometry (6)</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tfoot>
|
||
|
|
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
|
||
|
|
</tfoot>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Student01 (0)</td><td>Languages (1)</td><td>male (2)</td><td>80 (3)</td><td>70 (4)</td><td>75 (5)</td><td>80 (6)</td></tr>
|
||
|
|
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||
|
|
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||
|
|
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||
|
|
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||
|
|
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||
|
|
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||
|
|
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||
|
|
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||
|
|
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||
|
|
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||
|
|
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||
|
|
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||
|
|
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||
|
|
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table></div>
|
||
|
|
|
||
|
|
<h1>HTML</h1>
|
||
|
|
<div id="html">
|
||
|
|
<pre class="prettyprint lang-html"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Javascript</h1>
|
||
|
|
<div id="javascript">
|
||
|
|
<pre class="prettyprint lang-javascript"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1>Optional CSS</h1>
|
||
|
|
<div id="css">
|
||
|
|
<pre class="prettyprint lang-css"></pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|