Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/dragtable.mod.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/extras/jquery.dragtable.mod.js"></script>
<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>
...

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* 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;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(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...