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">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.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/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.jui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/cupertino/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>http://www.google.com</td>
        </tr>
        <tr>
            <td>abc 1</td>
           ...

CSS

/* This class is added to the span wrapping the
   header text using the "onRenderHeader" option */
 .roundedCorners {
    border: #2694e8 1px solid;
    padding: 0 10px;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

JavaScript

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

		// *** APPEARANCE ***
		// Add a theme - 'blackice', 'blue', 'dark', 'default', 'dropbox',
		// 'green', 'grey' or 'ice' stylesheets have all been loaded
		// to use 'bootstrap' or 'jui', you'll need to include "uitheme"
		// in the widgets option - To modify the class names, extend from
		// themes variable. Look for "$.extend($.tablesorter.themes.jui"
		// at the bottom of this window
		// this option only adds a table class name "tablesorter-{theme}"
		theme: 'jui',

		// fix the column widths
		widthFixed: false,

		// Show an indeterminate timer icon in the header when the table
		// is sorted or filtered
		showProcessing: false,

		// header layout template (HTML ok); {content} = innerHTML,
		// {icon} = <i/> (class from cssIcon)
		headerTemplate: '{content}{icon}',

		// return the modified template string
		onRenderTemplate: null, // function(index, template){ return template; },

		// called after each header cell is rendered, use index to target the column
		// customize header HTML
		onRenderHeader: function (index) {
			// the span wrapper is added by default
			$(this).find('div.tablesorter-header-inner').addClass('roundedCorners');
		},

		// *** FUNCTIONALITY ***
		// prevent text selection in header
		cancelSelection: true,

		// add tabindex to header for keyboard accessibility
		tabIndex: true,

		// other options: "ddmmyyyy" & "yyyymmdd"
		dateFormat: "mmddyyyy",

		// The key used to select more than one column for multi-column
		// sorting.
		sortMultiSortKey: "shiftKey",

		// key used to remove sorting on a column
		sortResetKey: 'ctrlKey',

		// false for German "1.234.567,89" or French "1 234 567,89"
		usNumberFormat: true,

		// If true, parsing of all table cell data will be delayed
		// until the user initializes a sort
		delayInit: false,

		// if true, server-side sorting should be...