Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<table class="tablesorter">
    <thead>
        <tr>
            <th>
                <div class="table-handle"></div>
                <div class="sort">AlphaNumeric</div>
            </th>
            <th>
                <div class="table-handle"></div>
                <div class="sort">Numeric</div>
            </th>
            <th>
                <div class="table-handle"></div>
                <div class="sort">Animals</div>
            </th>
            <th>
                <div class="table-handle"></div>
                <div class="sort">Sites</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>http://www.whitehouse.gov/</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>http://www.ucla.edu/</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>http://www.wikipedia.org/</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
           ...

CSS

.table-handle {
    background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAANAQMAAAC5Li2yAAAABlBMVEXd3d2ZmZl1DvVeAAAADklEQVQI12MAAQcsmAEAEFoBQSzdkZ8AAAAASUVORK5CYII=');
    background-repeat: repeat-x;
    height: 18px;
    margin: 0 1px;
    cursor: move;
}
/* 
 * dragtable
 *
 * @Version 2.0.14
 *
 * default css
 *
 */

/*##### the dragtable stuff #####*/
 .dragtable-sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -moz-user-select: none;
}
.dragtable-sortable li {
    margin: 0;
    padding: 0;
    float: left;
    font-size: 1em;
    background: white;
}
.dragtable-sortable th, .dragtable-sortable td {
    border-left: 0px;
}
.dragtable-sortable li:first-child th, .dragtable-sortable li:first-child td {
    border-left: 1px solid #CCC;
}
.ui-sortable-helper {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.ui-sortable-placeholder {
    -moz-box-shadow: 4px 5px 4px #C6C6C6 inset;
    -webkit-box-shadow: 4px 5px 4px #C6C6C6 inset;
    box-shadow: 4px 5px 4px #C6C6C6 inset;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    visibility: visible !important;
    background: #EFEFEF !important;
    visibility: visible !important;
}
.ui-sortable-placeholder * {
    opacity: 0.0;
    visibility: hidden;
}

JavaScript

$(function () {
    var $table = $('table')
        .dragtable({
            dragHandle: '.handle',
            persistState: function (table) {
                // remove div wrapper, or swapped header
                // contents will be replaced
                $table.find('thead .tablesorter-header-inner').contents().unwrap();
                $table.trigger('updateAll', false);
            }
        })
        .tablesorter({
            theme: 'blue',
            selectorSort: '.sort',
            widthFixed: true
        });
});