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⁽¹⁾ 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⁽²⁾ 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

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

Javascript

$(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']
  });
});

Optional 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;
}

tablesorter

Dragtable Mod (beta)

Flexible client-side table sorting