tablesorter/docs/example-dragtable.html
2017-01-06 20:39:06 -06:00

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> &amp; <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">&lt;tr&gt;
&lt;th class="col-id" data-sorter="digit"&gt;...&lt;/th&gt; &lt;!-- parser set by data-attribute --&gt;
&lt;th class="col-name drag-enable sorter-text"&gt;...&lt;/th&gt; &lt;!-- parser set by header class --&gt;
&lt;th class="col-date drag-enable"&gt;...&lt;/th&gt; &lt;!-- parser set by headers option (see below) --&gt;
&lt;/tr&gt;</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">&lt;tr&gt;
&lt;th class="col-id" data-sorter="digit"&gt;
&lt;div class="table-handle-disabled"&gt;&lt;/div&gt;
&lt;!-- clicking on the "sort" wrapper below will not trigger a sort, because the cell is not set to sort --&gt;
&lt;div class="sorter"&gt;9999&lt;/div&gt;
&lt;/th&gt;
&lt;th class="col-name sorter-text drag-enable"&gt;
&lt;div class="table-handle"&gt;&lt;/div&gt;
&lt;div class="sorter"&gt;Name&lt;/div&gt;
&lt;/th&gt;
&lt;th class="col-date drag-enable"&gt;
&lt;div class="table-handle"&gt;&lt;/div&gt;
&lt;div class="sorter"&gt;1/1/2015&lt;/div&gt;
&lt;/th&gt;
&lt;/tr&gt;</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 &amp; 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>