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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<input type="button" value="show" id="togglebtn"> deprecated rows
<p>
<table class="tablesorter">
    <thead>
        <tr>
            <th class="filter-select">AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody id="show">
        <tr>
            <td>alsonot</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>not</td>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr class="deprecated">
            <td>deprecated</td>
            <td>10</td>
            <td>Girafee</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>not</td>
            <td>767</td>
            <td>Bison</td>
            <td>http://www.whitehouse.gov/</td>
        </tr>
        <tr>
            <td>not</td>
            <td>3</td>
            <td>Chimp</td>
            <td>http://www.ucla.edu/</td>
        </tr>
        <tr>
           ...

CSS

/*
 Demo by user3758121
 http://stackoverflow.com/q/24316468/145346
*/

JavaScript

$(function () {
    $('table').tablesorter({
        theme: 'blue',
        widthFixed: true,
        widgets: ['zebra', 'filter']
    });

    var hidden = false;
    $('#togglebtn').click(function () {
        $(togglebtn).val(hidden ? "hide" : "show");
        if (!hidden) {
            $('.deprecated').appendTo("#hide");
        } else {
            $('.deprecated').appendTo("#show");
        }
        $("table.tablesorter").trigger("update");
        hidden = !hidden;
    }).click();
});