+
+
+
+
+ Notes
+
+
+
+ -
+
- This demo uses a modified version of the jQuery UI Dragtable widget (beta) to work with tablesorter. +
- This mod has been tested with the following widgets: alignChar, columns, cssStickyHeaders, editable, filter, grouping, headerTitles, math, output, pager print, reflow, resizable, repeatHeaders, staticRow, uitheme & zebra. +
- This mod does not currently work with the following widgets:
+
-
+
- chart - needs more work to be compatible. +
- columnSelector - needs more work - making this compatible will require significant changes to the dragtable core. +
- saveSort - this saves the newly moved sorted column properly, but on page reload the column order is restored so it sorts the incorrect column. +
- scroller - way too much work to make this compatible. +
- stickyHeaders - needs more work - can't get the drag handle in the cloned sticky header from passing the mousedown on to the original drag handle. +
+ - Any widgets not listed above can be assumed to be incompatible, for now. +
Tablesorter setup
+
+ A complete javascript example can be found in the demo section, below the table.
+
+ To use this mod:
+
+
+ -
+
- Initialize the dragtable mod script first, then initialize tablesorter. +
- Warning! When setting up the initialization code, make sure that the dragtable
sortClassoption exactly matches the tablesorterselectorSortoption, or the table will be unsortable. +$('table') + .dragtable({ sortClass: '.sorter' }) // this is already the default value + .tablesorter({ selectorSort: '.sorter' }); // this default value is 'th, td'
+ - Warning! Do not reference a column using jQuery data (e.g.
$('th:contains(Name)').data('sorter', 'text');) or by it's zero-based index(1) because these references do not get updated after a column move! + + Instead, use one of the following methods (these examples set the column parser): +Set parser by data-attribute or header class
+<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>
+Or, set parser by
+headersoption$('table').tablesorter({ + headers : { + '.col-date' : { sorter : 'shortDate' } + } +});
+ - 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(2) which needs to be targeted by the
selectorSortoption to make it clickable for sorting. + + The resulting HTML may look like this: +<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>
+
+
sortList), or an array of settings (like the resizable_widths option) are updated internally by the mod.
+
+ (2) The class name for the dragable handle is set by the dragtable dragHandle option & the class name for the clickable div wrapping the header text is set by the dragtable sortClass option.
+ Demo
+| Name (0) | +Major (1) | +Sex (2) | +English (3) | +Japanese (4) | +Calculus (5) | +Geometry (6) | +
|---|---|---|---|---|---|---|
| Name | Major | Sex | English | Japanese | Calculus | Geometry |
| Student01 (0) | Languages (1) | male (2) | 80 (3) | 70 (4) | 75 (5) | 80 (6) |
| Student02 | Mathematics | male | 90 | 88 | 100 | 90 |
| Student03 | Languages | female | 85 | 95 | 80 | 85 |
| Student04 | Languages | male | 60 | 55 | 100 | 100 |
| Student05 | Languages | female | 68 | 80 | 95 | 80 |
| Student06 | Mathematics | male | 100 | 99 | 100 | 90 |
| Student07 | Mathematics | male | 85 | 68 | 90 | 90 |
| Student08 | Languages | male | 100 | 90 | 90 | 85 |
| Student09 | Mathematics | male | 80 | 50 | 65 | 75 |
| Student10 | Languages | male | 85 | 100 | 100 | 90 |
| Student11 | Languages | male | 86 | 85 | 100 | 100 |
| Student12 | Mathematics | female | 100 | 75 | 70 | 85 |
| Student13 | Languages | female | 100 | 80 | 100 | 90 |
| Student14 | Languages | female | 50 | 45 | 55 | 90 |
| Student15 | Languages | male | 95 | 35 | 100 | 90 |
| Student16 | Languages | female | 100 | 50 | 30 | 70 |
| Student17 | Languages | female | 80 | 100 | 55 | 65 |
| Student18 | Mathematics | male | 30 | 49 | 55 | 75 |
| Student19 | Languages | male | 68 | 90 | 88 | 70 |
| Student20 | Mathematics | male | 40 | 45 | 40 | 80 |
HTML
+
+
+
+
+ Javascript
+
+
+
+
+ Optional CSS
+
+
+
+
+