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="http://mottie.github.com/tablesorter/js/widgets/widget-columnSelector.js"></script>
<div class="columnSelectorWrapper">
    <input id="colSelect1" type="checkbox" class="hidden" />
    <label class="columnSelectorButton" for="colSelect1">Column</label>
    <div id="columnSelector" class="columnSelector">
        <label>
            <input name="colsel" data-mode="auto" type="radio" checked="checked" />Auto:</label>
        <label>
            <input name="colsel" data-mode="1" type="radio" />Columns 2-3</label>
        <label>
            <input name="colsel" data-mode="2" type="radio" />Columns 4-7</label>
    </div>
</div>
<table class="tablesorter custom-popup">
    <thead>
        <tr>
            <th data-priority="critical">Name</th>
            <!-- Remove column from selection popup by including -->
            <!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
            <th>Major</th>
            <!-- columnSelector-false will initially hide the column -->
            <th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
            <th data-priority="4">English</th>
            <th data-priority="5">Japanese</th>
            <th data-priority="3">Calculus</th>
            <th data-priority="2">Geometry</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>Student03</td>
            <td>Languages</td>
           ...

CSS

/*** custom css only popup ***/
 .columnSelectorWrapper {
    position: relative;
    margin: 10px 0;
    display: inline-block;
}
.columnSelector, .hidden {
    display: none;
}
.columnSelectorButton {
    background: #99bfe6;
    border: #888 1px solid;
    color: #111;
    border-radius: 5px;
    padding: 5px;
}
#colSelect1:checked + label {
    background: #5797d7;
    border-color: #555;
}
#colSelect1:checked ~ #columnSelector {
    display: block;
}
.columnSelector {
    width: 120px;
    position: absolute;
    top: 30px;
    padding: 10px;
    background: #fff;
    border: #99bfe6 1px solid;
    border-radius: 5px;
}
.columnSelector label {
    display: block;
}
.columnSelector label:nth-child(1) {
    border-bottom: #99bfe6 solid 1px;
    margin-bottom: 5px;
}
.columnSelector input {
    margin-right: 5px;
}
.columnSelector .disabled {
    color: #ddd;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function () {

    var setupColumnSelector = function (table) {
        $('#columnSelector input').on('change', function () {
            var $this = $(this),
                attr = $this.attr('data-mode'),
                mode = attr === '1' ? [[ 1, 2 ]] :
                    attr === '2' ? [[ 3, 4, 5, 6, 7 ]] :
                    true; // auto    
            $(table).trigger('refreshColumnSelector', mode);
        });
    };

    /*** custom css only button popup ***/
    $(".custom-popup").tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
        widgetOptions: {
            // target the column selector markup
            columnSelector_container: null, // $('#columnSelector'),
            // column status, true = display, false = hide
            // disable = do not display on list
            columnSelector_columns: {
                0: 'disable' /* set to disabled; not allowed to unselect it */
            },
            // remember selected columns (requires $.tablesorter.storage)
            columnSelector_saveColumns: true,

            // container layout
            columnSelector_layout: '<label><input type="checkbox">{name}</label>',
            // data attribute containing column name to use in the selector container
            columnSelector_name: 'data-selector-name',

            /* Responsive Media Query settings */
            // enable/disable mediaquery breakpoints
            columnSelector_mediaquery: true,
            // toggle checkbox name
            columnSelector_mediaqueryName: 'Auto: ',
            // breakpoints checkbox initial setting
            columnSelector_mediaqueryState: true,
            // responsive table hides columns with priority 1-6 at these breakpoints
            // see...