Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="//mottie.github.io/tablesorter/css/theme.blue.css">
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="//mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="//mottie.github.io/tablesorter/js/widgets/widget-columnSelector.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-print.js"></script>
<div class="print button">Print</div>
<div class="columnSelectorWrapper button">
    <input id="colSelect1" type="checkbox" class="hidden">
    <label class="columnSelectorButton" for="colSelect1">Column</label>
    <div id="columnSelector" class="columnSelector">
        <!-- this div is where the column selector is added -->
    </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 class="columnSelector-disable">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>
            <td>female</td>
            <td>85</td>
            <td>95</td>
            <td>80</td>
           ...

CSS

.button {
    position: relative;
    padding: 1px 6px;
    display: inline-block;
    cursor: pointer;
    border: #000 1px solid;
    border-radius: 5px;
}
.columnSelector, .hidden {
    display: none;
}
#colSelect1:checked + label {
    color: #307ac5;
}
#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;
    text-align: left;
}
.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 () {

    // v2.24.6, change popup print & close button text
    // See print_now description
    $.tablesorter.language.button_print = "Print";
    $.tablesorter.language.button_close = "Close";

    $(".tablesorter").tablesorter({
        theme: 'blue',
        widgets: ["zebra", "filter", "print", "columnSelector"],
        widgetOptions: {
            columnSelector_container: $('#columnSelector'),
            columnSelector_name: 'data-name',

            print_title: '', // this option > caption > table id > "table"
            print_dataAttrib: 'data-name', // header attrib containing modified header name
            print_rows: 'f', // (a)ll, (v)isible, (f)iltered, or custom css selector
            print_columns: 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
            print_extraCSS: '', // add any extra css definitions for the popup window here
            print_styleSheet: 'https://mottie.github.io/tablesorter/css/theme.blue.css', // add the url of your print stylesheet
            print_now: false, // Open the print dialog immediately if true
            // callback executed when processing completes - default setting is null
            print_callback: function (config, $table, printStyle) {
                // do something to the $table (jQuery object of table wrapped in a div)
                // or add to the printStyle string, then...
                // print the table using the following code
                $.tablesorter.printTable.printOutput(config, $table.html(), printStyle);
            }
        }
    });

    $('.print').click(function () {
        $('.tablesorter').trigger('printTable');
    });

});