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
sortClass
option exactly matches the tablesorterselectorSort
option, 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
headers
option$('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
selectorSort
option 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 |