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">
<h2>Demo using <a href="http://filamentgroup.com/lab/date-range-picker-using-jquery-ui-16-and-jquery-ui-css-framework.html">Filament Group Date range picker</a>
</h2>
<button class="reset">Reset</button>
<br>
<br>
<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Dates</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>Mar 5, 2014</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>Jan 2, 2014</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>Sep 20, 2013</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>Apr 8, 2014</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>Feb 5, 2014</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>Dec 18, 2013</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
            <td>Mar 18, 2014</td>
        </tr>
        <tr>
            <td>ABC 10</td>
            <td>87</td>
            <td>Zebra</td>
            <td>Jul 1, 2014</td>
        </tr>
        <tr>
            <td>zyx 1</td>
            <td>999</td>
            <td>Koala</td>
            <td>Jan 18, 2014</td>
        </tr>
        <tr>
            <td>zyx 12</td>
         ...

CSS

.ui-daterangepickercontain {
    font-size: 62.5%;
}
.tablesorter {
    width: 50%;
}

/*styles for jquery ui daterangepicker plugin */
.ui-daterangepickercontain {
	position: absolute;
	z-index: 999;
}
.ui-daterangepickercontain .ui-daterangepicker {
	float: left;
	padding: 5px !important;
	width: auto;
	display: inline;
	background-image: none !important;
	clear: left;
}
.ui-daterangepicker ul, .ui-daterangepicker .ranges, .ui-daterangepicker .range-start, .ui-daterangepicker .range-end {
	float: left;
	padding: 0;
	margin: 0;
}
.ui-daterangepicker .ranges {
	width: auto;
	position: relative;
	padding: 5px 5px 40px 0;
	margin-left: 10px;
}
.ui-daterangepicker .range-start, .ui-daterangepicker .range-end {
	margin-left: 5px;
}
.ui-daterangepicker button.btnDone {
	margin: 0 5px 5px 0;
	position: absolute;
	bottom: 0;
	right: 0;
	clear: both;
	cursor: pointer;
	font-size: 1.1em;
}
.ui-daterangepicker ul {
	width: 17.6em;
	background: none;
	border: 0;
}
.ui-daterangepicker li {
	list-style: none;
	padding: 1px;
	cursor: pointer;
	margin: 1px 0;
}
.ui-daterangepicker li.ui-state-hover, .ui-daterangepicker li.ui-state-active {
	padding: 0;
}
.ui-daterangepicker li.preset_0 {
	margin-top: 1.5em !important;
}
.ui-daterangepicker .ui-widget-content a {
	text-decoration: none !important;
}
.ui-daterangepicker li a {
	font-weight: normal;
	margin: .3em .5em;
	display: block;
}
.ui-daterangepicker li span {
	float: right;
	margin: .3em .2em;
}
.ui-daterangepicker .title-start, .ui-daterangepicker .title-end {
	display: block;
	margin: 0 0 .2em;
	font-size: 1em;
	padding: 0 4px 2px;
}
.ui-daterangepicker .ui-datepicker-inline {
	font-size: 1em;
}
.ui-daterangepicker-arrows {
	padding: 2px;
	width: 204px;
	position: relative;
}
.ui-daterangepicker-arrows input.ui-rangepicker-input {
	width: 158px;
	margin: 0 2px 0 20px;
	padding: 2px;
	height: 1.1em;
}
.ui-daterangepicker-arrows .ui-daterangepicker-prev, .ui-daterangepicker-arrows .ui-daterangepicker-next {
	position:...

JavaScript

/*
    The plugin uses $.browser.msie which is not
    available in jQuery 1.9+
*/

$(function () {
    var $table = $('table')
        .tablesorter({
        theme: 'blue',
        headerTemplate: '{content}',
        widgets: ['zebra', 'filter'],
        widgetOptions: {
            filter_reset: '.reset',
            filter_cssFilter: ['', '', '', 'datepicker']
        }
    });

    $('.datepicker').daterangepicker({
        onClose : function(){
            $table.trigger('search');
        }
	});
});


/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "daterangepicker.jQuery.js"
 * by Scott Jehl, [email protected]
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/update_date_range_picker_with_jquery_ui/
 * demo page: http://www.filamentgroup.com/examples/daterangepicker/
 * 
 * Copyright (c) 2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Dependencies: jquery, jquery UI datepicker, date.js library (included at bottom), jQuery UI CSS Framework
 * Changelog:
 * 	10.23.2008 initial Version
 *  11.12.2008 changed dateFormat option to allow custom date formatting (credit: http://alexgoldstone.com/)
 *  01.04.09 updated markup to new jQuery UI CSS Framework
 *  01.19.2008 changed presets hash to support different text 
 * --------------------------------------------------------------------
 */
jQuery.fn.daterangepicker = function(settings){
	var rangeInput = jQuery(this);
	
	//defaults
	var options = jQuery.extend({
		presetRanges: [
			{text: 'Today', dateStart: 'today', dateEnd: 'today' },
			{text: 'Last 7 days', dateStart: 'today-7days', dateEnd: 'today' },
			{text: 'Month to date', dateStart: function(){ return Date.parse('today').moveToFirstDayOfMonth();  }, dateEnd: 'today' },
			{text: 'Year to date', dateStart: function(){ var x=...