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>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<script src="https://rawgit.com/longbill/jquery-date-range-picker/master/dist/jquery.daterangepicker.min.js"></script>
<h2>Demo using <a href="https://github.com/longbill/jquery-date-range-picker">jQuery date range picker</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...

CSS

.date-picker {
    width:170px;
    height:25px;
    padding:0;
    border:0;
    line-height:25px;
    padding-left:10px;
    font-size:12px;
    font-family:Arial;
    font-weight:bold;
    cursor:pointer;
    color:#303030;
    position:relative;
    z-index:2;
}
.date-picker-wrapper {
    position:absolute;
    z-index:1;
    border:1px solid #bfbfbf;
    background-color:#efefef;
    width:428px;
    padding: 5px 12px;
    font-size:12px;
    line-height:20px;
    color:#aaa;
    font-family:Arial;
    box-shadow:3px 3px 10px rgba(0, 0, 0, 0.5);
}
.date-picker-wrapper.single-date {
    width:auto;
}
.date-picker-wrapper.no-shortcuts {
    padding-bottom:12px;
}
.date-picker-wrapper .footer {
    font-size:11px;
    padding-top: 3px;
}
.date-picker-wrapper b {
    color:#666;
    font-weight:700;
}
.date-picker-wrapper a {
    color: rgb(107, 180, 214);
    text-decoration:underline;
}
.date-picker-wrapper .month-wrapper {
    border:1px solid #bfbfbf;
    border-radius:3px;
    background-color:#fff;
    padding:5px;
    cursor:default;
    position:relative;
    _overflow:hidden;
}
.date-picker-wrapper .month-wrapper table {
    width:190px;
    float:left;
}
.date-picker-wrapper .month-wrapper table.month2 {
    width:190px;
    float:right;
}
.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {
    vertical-align:middle;
    text-align:center;
    line-height:14px;
    margin : 0px;
    padding : 0px;
}
.date-picker-wrapper .month-wrapper table .day {
    height:19px;
    line-height:19px;
    font-size:12px;
    margin-bottom:1px;
    color:#999;
    cursor:default;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth, .date-picker-wrapper .month-wrapper table div.day.nextMonth {
    color:#999;
    cursor:default;
}
.date-picker-wrapper .month-wrapper table .day.checked {
    background-color: rgb(156, 219, 247);
}
.date-picker-wrapper .month-wrapper table .week-name {
    height:20px;
   ...

JavaScript

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