index.html

<html>
<head>
	<title></title>
	<style type="text/css">
	body {
		font: normal 14px/21px Arial, serif;
	}
	.example {
		float: left;
		width: 40%;
		margin: 5%;
	}
	table {
		font-size: 1em;
		border-collapse: collapse;
		margin: 0 auto
	}
	table, th, td {
		border: 1px solid #999;
		padding: 8px 16px;
		text-align: left;
	}
	table.ex-2 {
		min-width: 100px;
	}
	th {
		background: #f4f4f4;
		cursor: pointer;
	}

	th:hover,
	th.sorted {
		background: #d4d4d4;
	}

	th.no-sort,
	th.no-sort:hover {
		background: #f4f4f4;
		cursor: not-allowed;
	}

	th.sorted.ascending:after {
		content: "  \2191";
	}

	th.sorted.descending:after {
		content: " \2193";
	}

	.disabled {
		opacity: 0.5;
	}
	</style>
</head>
<body>

<div class="example ex-1">
	<table>
		<thead>
			<tr>
				<th>Name</th>
				<th>Band</th>
				<th>Date of Birth</th>
				<th class="number">Age</th>
				<th class="no-sort">Photo</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Thom Yorke</td>
				<td>Radiohead</td>
				<td data-sort-value="2">October 7, 1968</td>
				<td>43</td>
				<td><img src="http://place-hoff.com/100/100" width="50"></td>
			</tr>
			<tr>
				<td>Justin Vernon</td>
				<td>Bon Iver</td>
				<td data-sort-value="4">April 30, 1981</td>
				<td>30</td>
				<th><img src="http://www.fillmurray.com/100/100" width="50"></td>
			</tr>
			<tr>
				<td>Paul McCartney</td>
				<td>The Beatles</td>
				<td data-sort-value="1">June 18, 1942</td>
				<td>69</td>
				<td><img src="https://www.placecage.com/100/100" width="50"></td>
			</tr>
			<tr>
				<td>Sam Beam</td>
				<td>Iron &amp; Wine</td>
				<td data-sort-value="3">July 26, 1974</td>
				<td>37</td>
				<td><img src="http://www.stevensegallery.com/200/200" width="50"></td>
			</tr>
		</tbody>
	</table>
</div>

<div class="example ex-2">
	<div id="sort-msg" style="float: right;" />
</div>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery.tablesort.min.js"></script>
<script type="text/javascript">

	$(function() {

		var table = $('<table class="ex-2"></table>');
		table.append('<thead><tr><th class="number">Number</th></tr></thead>');
		var tbody = $('<tbody></tbody>');

		for(var i = 0; i<500; i++) {
			tbody.append('<tr><td>' + Math.floor(Math.random() * 100) + '</td></tr>');
		}
		table.append(tbody);
		$('.example.ex-2').append(table);

		$('table').tablesort().data('tablesort');

		$('thead th.number').data('sortBy', function(th, td, sorter) {
			return parseInt(td.text(), 10);
		});

		//Sorting indicator example
		$('table.ex-2').on('tablesort:start', function(event, tablesort) {
			$('table.ex-2 tbody').addClass("disabled");
			$('.ex-2 th.number').removeClass("sorted").text('Sorting..');
		});

		$('table.ex-2').on('tablesort:complete', function(event, tablesort) {
			$('table.ex-2 tbody').removeClass("disabled");
			$('.ex-2 th.number').text('Number');
		});


	});
</script>

</body>
</html>