Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.1/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.1/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.1/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.1/cldr/unresolved.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/number.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.0.0/globalize/date.js"></script>
<script src="http://mottie.github.com/tablesorter/docs/js/docs.js"></script>
<button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric (Globalize)</th>
            <th>Animals</th>
            <th>Date (Globalize)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>12,735.00</td>
            <td>Koala</td>
            <td>Jan 22, 2015 AD</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>65.34</td>
            <td>Ox</td>
            <td>Mar 30, 2015 AD</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>∞</td>
            <td>Girafee</td>
            <td>Dec 31, 2014 AD</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>-∞</td>
            <td>Bison</td>
            <td>Apr 13, 2015 AD</td>
        </tr>
        <tr>
            <td>abc 11</td>
           ...

CSS

/*
 This demo uses jQuery Globalize parsers to parse
 language specific numbers & dates to make them sortable.
 See: https://github.com/jquery/globalize
*/

/* demo stuff */
.hidden { display: none; }
.results { color: red; }

JavaScript

/* Globalize.locale( 'xx' ) must be set prior to initializing tablesorter! */
$(function () {

	Globalize.load(data);
	Globalize.locale('en');

	/*! jQuery Globalize date parser
    (https://github.com/jquery/globalize#date-module) */
	$.tablesorter.addParser({
		id: 'globalize-date',
		is: function () {
			return false;
		},
		format: function (s, table, cell, cellIndex) {
			var c = table.config,
			// add options to 'config.globalize' for all columns
			// --> globalize : { skeleton: 'GyMMMd' }
			// or per column by using the column index
			// --> globalize : { 0 : { datetime: 'medium' } }
			options = c.globalize &&
                (c.globalize[cellIndex] || c.globalize) || {},
			date = Globalize && Globalize.dateParser ?
                Globalize.dateParser(options)(s) : s ? new Date(s) : s;
			return date instanceof Date && isFinite(date) ? date.getTime() : s;
		},
		type: 'numeric'
	});

	/*! jQuery Globalize number parser
    (https://github.com/jquery/globalize#number-module) */
	$.tablesorter.addParser({
		id: 'globalize-number',
		is: function () {
			return false;
		},
		format: function ( str, table, cell, cellIndex ) {
			var c = table.config,
			// add options to 'config.globalize' for all columns
            // --> globalize : { skeleton: 'GyMMMd' }
			// or per column by using the column index
            // --> globalize : { 0 : { datetime: 'medium' } }
			options = c.globalize &&
                ( c.globalize[ cellIndex ] || c.globalize ) || {},
			num = Globalize && Globalize.numberParser ? 
                Globalize.numberParser( options )( str ) :
				str ? $.tablesorter.formatFloat( ( str || '' )
                    .replace( /[^\w,. \-()]/g, '' ), table ) : str;
			return str && typeof num === 'number' ? num : str;
		},
		type: 'numeric'
	});
    
	$('table').tablesorter({
		theme: 'blue',
		// globalize options
		globalize: {
            1: {},
			3: { raw: 'MMM d, y G' }
		},
		headers: {
            1: { sorter: 'globalize-number'...