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">
<h2>Dynamic checkbox sorting</h2>

<p>Check/uncheck the boxes in the first column, then sort</p>
<table class="tablesorter">
    <thead>
        <tr>
            <th>
                <input type="checkbox" />
            </th>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>http://www.yahoo.com</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>
               ...

CSS

h2 {
    font-size: 130%;
}
h2, p {
    text-align: center;
}
table.tablesorter tbody tr.odd.checked td {
    background: #8080c0;
    color: #fff;
}
table.tablesorter tbody tr.even.checked td {
    background: #a0a0e0;
    color: #fff;
}
.spacer {
    height: 1000px;
}

JavaScript

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'checkbox',
    is: function (s) {
        return false;
    },
    format: function (s, table, cell, cellIndex) {
        var c, $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        c = ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
        $c.closest('tr').toggleClass('checked', c === 1);
        return c;
    },
    type: 'numeric'
});

$(function () {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            0: {
                sorter: 'checkbox'
            }
        },
        initialized: function (table) {

            // column containing all of the checkboxes (zero-based index)
            var ck, $hdrCheckbox,
                c = table.config,
                wo = c.widgetOptions,
                $t = $(table),
                columnWithCheckboxes = 0,
                // resort the table after the checkbox status has changed
                resort = false;

            $hdrCheckbox = $t
                .add(wo.$sticky)
                // make checkbox in header set all others
                .find('thead th:eq(' + columnWithCheckboxes + ') input[type=checkbox]')
                .bind('change', function () {
                    ck = this.checked;
                    $t
                        .children('tbody')
                        .find('tr td:nth-child(' + (columnWithCheckboxes + 1) + ') input')
                        .each(function () {
                            this.checked = ck;
                            $(this).trigger('change');
                        });
                    // make sure stickyHeader checkbox gets updated
                    $hdrCheckbox.prop('checked', ck);
                })
                .bind('mouseup', function () {
                    return false;
                });
            
            $t.find('tbody...