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="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.datepick.js"></script>
<h2>Demo using <a href="http://keith-wood.name/datepick.html#range">Keith Wood jQuery datepicker</a>
</h2>

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

CSS

/* Default styling for jQuery Datepicker v5.0.0. */
.datepick {
	background-color: #fff;
	color: #000;
	border: 1px solid #444;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
	font-family: Arial,Helvetica,Sans-serif;
	font-size: 90%;
}
.datepick-rtl {
	direction: rtl;
}
.datepick-popup {
	z-index: 1000;
}
.datepick-disable {
	position: absolute;
	z-index: 100;
	background-color: white;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.datepick a {
	color: #fff;
	text-decoration: none;
}
.datepick a.datepick-disabled {
	color: #888;
	cursor: auto;
}
.datepick button {
    margin: 0.25em;
    padding: 0.125em 0em;
    background-color: #fcc;
    border: none;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
	float: left;
	width: 100%;
	background-color: #000;
	color: #fff;
	font-size: 90%;
	font-weight: bold;
}
.datepick-ctrl {
	background-color: #600;
}
.datepick-cmd {
	width: 30%;
}
.datepick-cmd:hover {
	background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
	background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
	width: 8%;
}
a.datepick-cmd {
	height: 1.5em;
}
button.datepick-cmd {
	text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
	float: left;
	padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
	float: left;
	width: 35%;
	text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
	float: right;
	padding-right: 2%;
	text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
	float: right;
	padding-left: 0%;
	padding-right: 2%;
	text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
	float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl...

JavaScript

/*
    Don't forget to include BOTH of these files:
        jquery.plugin.js (not the jQuery library)
        jquery.datepick.js
    Look in the "External Resources" section (left side) for links
*/

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

    $('.datepicker').datepick({
        rangeSelect: true,
        monthsToShow: 2,
        onClose: function() { 
            $table.trigger('search');
        }
    });
});