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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table id="table" class="tablesorter">
	<thead>
		<tr>
			<th>Rank</th>
			<th>Name</th>
			<th>Delivery (days)</th>
			<th>Price Range</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>Widget</td><td>2 - 10</td><td>$5.95 - $13.20</td></tr>
		<tr><td>11</td><td>Doodad</td><td>1 - 4</td><td>$2.99 - $8.40</td></tr>
		<tr><td>12</td><td>Whatchamacallit</td><td>3 - 7</td><td>$4.29 - $15.99</td></tr>
		<tr><td>15</td><td>Thingy</td><td>5 - 6</td><td>$9.99 - $13.20</td></tr>
		<tr><td>21</td><td>Cube</td><td>2 - 7</td><td>$6.99 - $14.99</td></tr>
		<tr><td>13</td><td>It</td><td>5 - 12</td><td>$15.89 - $18.22</td></tr>
		<tr><td>5</td><td>Fred</td><td>20 - 30</td><td>$13.19 - $15.54</td></tr>
		<tr><td>10</td><td>FuBar</td><td>4</td><td>$5.50</td></tr>
		<tr><td>16</td><td>Otto</td><td>2 -...

JavaScript

$(function() {

var ts = $.tablesorter,
	isDigit = /\d+/,
	nondigit = /[^\d,.\-()]/g,
	range = /\s+-\s+/;

ts.filter.types.insideRange = function( c, data ) {
	if ( isDigit.test( data.iFilter ) && range.test( data.iExact ) ) {
		var t, val, low, high,
			parts = data.iExact.replace( nondigit, '' ).split( '-' );
		// the cell does not contain a range
		if ( isNaN( parts[0] ) || isNaN( parts[1] ) ) {
			return null;
		}
		low = ts.formatFloat( parts[0], c.table );
		high = ts.formatFloat( parts[1], c.table );
		val = ts.formatFloat( data.iFilter.replace( nondigit, '' ), c.table );
		if ( high < low ) {
			// swap high & low
			t = high; high = low; low = t;
		}
		return low <= val && val <= high;
	}
	return null;
};

	// call the tablesorter plugin
	$("#table").tablesorter({
		theme: 'blue',
		widthFixed : true,
		widgets: ["zebra", "filter"],
		widgetOptions : {
			// set to false because it is difficult to determine if a filtered
			// row is already showing when looking at ranges
			filter_searchFiltered : false
		}
	});

});