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>
<divid="banner">
<h1>table<em>sorter</em></h1>
<h2>Dragtable Mod (beta)</h2>
<h3>Flexible client-side table sorting</h3>
<ahref="index.html">Back to documentation</a>
</div>
<divid="main">
<p></p>
<br>
<divid="root"class="accordion">
<h3id="notes"><ahref="#">Notes</a></h3>
<div>
<ul>
<li>This demo uses a modified version of the <ahref="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: <spanclass="good">alignChar</span>, <spanclass="good">columns</span>, <spanclass="good">cssStickyHeaders</span>, <spanclass="good">editable</span>, <spanclass="good">filter</span>, <spanclass="good">grouping</span>, <spanclass="good">headerTitles</span>, <spanclass="good">math</span>, <spanclass="good">output</span>, <spanclass="good">pager</span><spanclass="good">print</span>, <spanclass="good">reflow</span>, <spanclass="good">resizable</span>, <spanclass="good">repeatHeaders</span>, <spanclass="good">staticRow</span>, <spanclass="good">uitheme</span>&<spanclass="good">zebra</span>.</li>
<li>This mod <strong><em>does not</em></strong> currently work with the following widgets:
<ul>
<li><spanclass="bad">chart</span> - needs more work to be compatible.</li>
<li><spanclass="bad">columnSelector</span> - needs more work - making this compatible will require significant changes to the dragtable core.</li>
<li><spanclass="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><spanclass="bad">scroller</span> - way too much work to make this compatible.</li>
<li><spanclass="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>
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><spanclass="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.
<preclass="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><spanclass="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<supclass="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>
<preclass="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>
<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<supclass="bright">(2)</sup> which needs to be targeted by the <code>selectorSort</code> option to make it clickable for sorting.
<spanclass="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>
<spanclass="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>
<divid="demo"><tableclass="tablesorter">
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name (0)</th><!-- disable dragtable on this column -->
