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-lazyload.js"></script>
<table class="tablesorter">
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Image</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>Bill</td><td>Murray</td><td><img class="lazy" data-original="https://www.fillmurray.com/300/500" width="300" height="500" alt="Murray" /></td></tr>
		<tr><td>Joyce</td><td>Young</td><td><img class="lazy" data-original="https://placehold.it/300x500/ff0000/ffffff" width="300" height="500" alt="Red" /></td></tr>
		<tr><td>John</td><td>Hood</td><td><img class="lazy" data-original="https://placehold.it/300x500" width="300" height="500" alt="Grey" /></td></tr>
		<tr><td>Clark</td><td>Kent</td><td><img class="lazy" data-original="https://placebear.com/300/500" width="300" height="500" alt="Bear" /></td></tr>
		<tr><td>Beverly</td><td>Pyle</td><td><img class="lazy" data-original="https://placehold.it/300x500/ff00ff/ffffff" width="300" height="500" alt="Blue" /></td></tr>
		<tr><td>Bruce</td><td>Almighty</td><td><img class="lazy" data-original="https://placekitten.com/300/500" width="300" height="500" alt="Kittens" /></td></tr>
		<tr><td>Billy</td><td>Murray</td><td><img class="lazy" data-original="https://www.fillmurray.com/300/500" width="300" height="500" alt="Murray" /></td></tr>
		<tr><td>Frank</td><td>Bedlam</td><td><img class="lazy" data-original="https://placehold.it/300x500/0000ff/ffffff" width="300" height="500" alt="Blue" /></td></tr>
		<tr><td>Harry</td><td>Sally</td><td><img class="lazy" data-original="https://placebear.com/300/500" width="300" height="500" alt="Bear" /></td></tr>
	</tbody>
</table>

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() {
	$("table").tablesorter({
		theme : 'blue',
		widgets : [ 'lazyload', 'zebra', 'filter' ],
		widgetOptions : {
			// widget options
			lazyload_imageClass     : 'lazy',
			// scrollStop option (https://github.com/ssorallen/jquery-scrollstop)
			lazyload_latency        : 250,
			// lazyload options (see http://www.appelsiini.net/projects/lazyload)
			lazyload_threshold      : 0,
			lazyload_failure_limit  : 0,
			lazyload_event          : 'scrollstop',
			lazyload_effect         : 'show',
			lazyload_container      : window,
			lazyload_data_attribute : 'original',
			lazyload_skip_invisible : true,
			lazyload_appear         : function( elements_left, settings ) {
				// callback fired when image is in view, but before it is loaded
				console.log('loading', $(this).attr('data-original'));
				$(this).addClass( 'tablesorter-processing' );
			},
			lazyload_load           : function( elements_left, settings ) {
				// callback fired after image has loaded
				$(this).removeClass( 'tablesorter-processing' );
			},
			lazyload_placeholder    : 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
		}
	});
});