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">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.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>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.jui.css">
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-pager.js"></script>
<!-- pager -->
<div class="pager">
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/first.png" class="first" />
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/prev.png" class="prev" /> <span class="pagedisplay"></span> 
    <!-- this can be any element, including an input -->
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/next.png" class="next" />
    <img src="https://mottie.github.io/tablesorter/addons/pager/icons/last.png" class="last" />
    <select class="pagesize" title="Select page size">
        <option selected="selected" value="10">10</option>
       ...

CSS

/* This class is added to the span wrapping the
   header text using the "onRenderHeader" option */
 .roundedCorners {
    border: #777 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: 'blackice',

		// 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...