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>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<script src="https://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
Search:<br>
<button data-column="2">A$</button> (end of word)<br>
<button data-column="2">^L</button> (beginning of word)<br>
<button type="button" class="reset">Reset</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>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
            <td>http://www.nytimes.com/</td>
        </tr>
        <tr>
            <td>ABC 10</td>
            <td>87</td>
            <td>Zebra</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>zyx 1</td>
            <td>999</td>
            <td>Koala</td>
           ...

CSS

/* 
  tablesorter filter: How to add new search filter types
*/

JavaScript

// *** Filter search type function arguments *** (updated in v2.17.8)
// data.filter = filter input value for a column; iFilter = same as filter, except lowercase
// data.exact = table cell text (or parsed data, if column parser enabled)
// data.iExact = same as exact, except lowercase

// search for a match from the beginning of a string
// "^l" matches "lion" but not "koala"
$.tablesorter.filter.types.start = function( config, data ) {
	if ( /^\^/.test( data.iFilter ) ) {
		return data.iExact.indexOf( data.iFilter.substring(1) ) === 0;
	}
	return null;
};

// search for a match at the end of a string
// "a$" matches "Llama" but not "aardvark"
$.tablesorter.filter.types.end = function( config, data ) {
	if ( /\$$/.test( data.iFilter ) ) {
		var filter = data.iFilter,
			filterLength = filter.length - 1,
			removedSymbol = filter.substring(0, filterLength),
			exactLength = data.iExact.length;
		return data.iExact.lastIndexOf(removedSymbol) + filterLength === exactLength;
	}
	return null;
};

$(function () {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
			filter_reset: '.reset'
		}
    });

    // make search buttons work
    $('button[data-column]').click(function(){
        var $t = $(this),
            col = $t.data('column'),
            filter = [];
        filter[col] = $t.text();
        $('.tablesorter').trigger('search', [filter]);
    });

});