Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<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/parsers/parser-input-select.js"></script>
<h2>Dynamic checkbox sorting</h2>
<p>Check/uncheck the boxes in the first column, then sort</p>

<table class="tablesorter">

     <thead>
         <tr>
             <th><input type="checkbox"></th>
             <th>AlphaNumeric</th>
             <th>Numeric</th>
             <th>Animals</th>
             <th>Sites</th>
         </tr>
     </thead>

     <tbody>
         <tr><td><input type="checkbox"></td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
         <tr><td><input type="checkbox"></td><td>abc 1</td><td>234</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
         <tr><td><input type="checkbox"></td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
         <tr><td><input type="checkbox"></td><td>zyx 24</td><td>767</td><td>Bison <input type="checkbox"></td><td>http://www.whitehouse.gov/</td></tr>
         <tr><td><input type="checkbox"></td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
         <tr><td><input type="checkbox"></td><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
         <tr><td><input type="checkbox"></td><td>abc 9</td><td>155</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
         <tr><td><input type="checkbox"></td><td>ABC 10</td><td>87</td><td>Zebra</td><td>http://www.google.com <input type="checkbox"></td></tr>
         <tr><td><input type="checkbox"></td><td>zyx 1</td><td>999</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
         <tr><td><input type="checkbox"></td><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;
}

.spacer { height: 1000px; }

JavaScript

/*********************************************
This code only works with jQuery 1.7+
*********************************************/
$( function() {
	// using .on() which requires jQuery 1.7+
	$( 'table' ).on( 'tablesorter-initialized', function() {

		// class name to add on tr when checkbox is checked
		var highlightClass = 'checked',
		// resort the table after the checkbox is modified?
		resort = true,
		// if a server side database needs to be updated, do it here
		serverCallback = function( table, inputElement ) {},

		$table = $( this ),
		c = this.config,
		wo = c && c.widgetOptions,
		// include sticky header checkbox; if installed
		$sticky = c && wo.$sticky || '',
		doChecky = function( c, col ) {
			$table
				.children( 'tbody' )
				.children( 'tr:visible' )
				.children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
				.find( 'input[type=checkbox]' )
				.each( function() {
					this.checked = c;
					$( this ).trigger( 'change' );
				});
		};

		$table
			.children( 'tbody' )
			.on( 'change', 'input[type=checkbox]', function() {
				// ignore change if updating all rows
				if ( $table[0].ignoreChange ) { return; }
				var col, $this = $( this );
				$this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
				$this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
				// if your server side database needs more parameters, add them here sent to the callback
				serverCallback( $table[0], this );
				// uncheck header if any checkboxes are unchecked
				if ( !this.checked ) {
					$table.add( $sticky ).find( 'thead input[type=checkbox]' ).prop( 'checked', false );
				}
			})
			.end()
			.add( $sticky )
            .find( 'thead input[type=checkbox]' )
			// Click on checkbox in table header to toggle all inputs
			.on( 'change', function() {
				// prevent updateCell for every cell
				$table[0].ignoreChange = true;
				var c = this.checked,
					col = $( this ).closest( 'th' ).attr( 'data-column' );
				doChecky(...