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 input value sorting</h2>
<p>Add text to the input boxes in the third column, then sort</p>

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Inputs</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>10</td><td>Koala</td><td><input type="text" value="rrr" /></td></tr>
        <tr><td>abc 1</td><td>234</td><td>Ox</td><td><input type="text"/></td></tr>
        <tr><td>abc 9</td><td>10</td><td>Girafee</td><td><input type="text" value="aaa" /></td></tr>
        <tr><td>zyx 24</td><td>767</td><td>Bison</td><td><input type="text"/></td></tr>
        <tr><td>abc 11</td><td>3</td><td>Chimp</td><td><input type="text"/></td></tr>
        <tr><td>abc 2</td><td>56</td><td>Elephant</td><td><input type="text" value="ccc" /></td></tr>
        <tr><td>abc 9</td><td>155</td><td>Lion</td><td><input type="text"/></td></tr>
        <tr><td>ABC 10</td><td>87</td><td>Zebra</td><td><input type="text" value="ddd" /></td></tr>
        <tr><td>zyx...

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;
}

h2 { font-size: 130%; }
h2, p { text-align: center; }

JavaScript

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
    id: 'inputs',
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        var $c = $(cell);
        // return 1 for true, 2 for false, so true sorts before false
        if (!$c.hasClass('updateInput')) {
            $c
            .addClass('updateInput')
            .bind('keyup', function() {
                $(table).trigger('updateCell', [cell, false]); // false to prevent resort
            });
        }
        return $c.find('input').val();
    },
    type: 'text'
});

$(function() {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'stickyHeaders'],
        headers: {
            3: {
                sorter: 'inputs'
            }
        }
    });
});