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>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets-filter-formatter.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/filter.formatter.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Range</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>1-10</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>38-55</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>4-10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>11-22</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>13-43</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc 2</td><td>28-60</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td>abc 9</td><td>9-25</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td>ABC 10</td><td>9-23</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td>zyx 1</td><td>19-29</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td>zyx 12</td><td>0-6</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
    </tbody>
</table>

CSS

th { width: 25%; }

JavaScript

$('table').tablesorter({
    theme: 'blue',
    sortList: [[1,0]],
    widthFixed: true,
    widgets: ['zebra', 'filter'],
    widgetOptions: {
        filter_functions: {
            1 : function(e, n, f, i) {
                var parts = e.split('-'),
                    val = parseFloat(f),
                    min = parseFloat(parts[0]),
                    max = parseFloat(parts[1] || 999); // default max = 999
                return val >= min && val <= max;
            }
        },
        filter_formatter     : {
            1 : function($cell, indx){
                return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
						values : 0,
						min : 0,
						max : 60,
						delayed : false,
                        exactMatch: false,
						valueToHeader : false
					});
            }
        }
    }
});