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">
<select>
    <option value="-" disabled selected>Choose a column</option>
    <option value="0" data-direction="0">AlphaNumeric</option>
    <option value="1" data-direction="0">Numeric</option>
    <option value="2" data-direction="0">Animals</option>
    <option value="3" data-direction="0">Sites</option>
</select>
<button>Toggle Sort</button>

<br><br>

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>767</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
  ...

JavaScript

$('table').tablesorter({
    theme: 'blackice'
});

// select column to sort
$('select').on('change', function(){
    var column = $(this).val(),
        // 0 = descending, 1 = ascending
        direction = $(this).find('option:selected').attr('data-direction'),
        sort = [[ column, direction ]];
    if (column >= 0) {
        $('table').trigger("sorton", [sort]);
    }
});

// button to toggle sort direction
$('button').on('click', function(){
    var $s = $('select'),
        $o = $s.find('option:selected'),
        dir = $o.attr('data-direction') || 0;
    if (!$o.prop('disabled')) {
        dir = (parseInt( dir, 10) + 1) % 2;
        $o.attr('data-direction', dir);
        $s.trigger('change');
    }
});