jQuery plugin: Tablesorter 2.0 - Dragtable Mod (beta)

# tablesorter

## Dragtable Mod (beta)

### Flexible client-side table sorting

Back to documentation

### 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 tablesorter `selectorSort` 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>

(1) Options that use a column index (such as the `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

Student Grades
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