Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-staticRow.js"></script>
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button><p>
<table id="alphimals" class="tablesorter">
	<thead>
		<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	</thead>
	<tbody>
		<tr class="static" data-row-index="50%"><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
		<tr><td>D</td><td>4</td><td>Dog</td></tr>
		<tr><td>E</td><td>5</td><td>Emu</td></tr>
		<tr><td>F</td><td>6</td><td>Frog</td></tr>
		<tr><td>G</td><td>7</td><td>Goat</td></tr>
		<tr><td>A</td><td>1</td><td>Anteater</td></tr>
		<tr><td>B</td><td>2</td><td>Bear</td></tr>
		<tr><td>C</td><td>3</td><td>Cat</td></tr>
		<tr><td>H</td><td>8</td><td>Horse</td></tr>
		<!-- index of next row set to one less because of static row above set to 50% -->
		<tr class="static"...

CSS

#alphimals td {
	text-align: center;
}
.tablesorter tbody tr.static td {
	background-color: #999;
	color: #fff;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

	$('#alphimals, #table2').tablesorter({
		theme: 'blue',
		widgets: ['zebra', 'staticRow']
	})
	// (ctrl or mac command) + click to toggle static row
	.find('tbody tr').click(function(event){
		if (event.ctrlKey || event.metaKey) {
			$(this)
				.toggleClass('static')
				.trigger('staticRowsRefresh');
		}
	});

	$('.addrow').click(function(){
		$('#alphimals tbody')
			.append('<tr><td>AA</td><td>0</td><td>Aardvark</td></tr>')
			.trigger('update');
	});

	// move row up or down
	$('.move').click(function(){
		var direction = $(this).hasClass('up'),
			$rows = $('#alphimals tr'),
			$ig = $rows.filter(':contains(Iguana)').addClass('static'),
			len = $rows.length - 3, // subtract two because there are two other static rows
			v = $ig.data('row-index');
		v = direction ? --v : ++v;
		v = v > len ? len : v <= 0 ? 0 : v;
		$ig.data('row-index', v);
		$rows.trigger('staticRowsRefresh');
	});

});