Tablesorter demo

All options included, as well as the uitheme widget

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="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<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>
           ...

CSS

/*!
 * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
 *
 * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Built for http://www.improvely.com
 */

 .daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3000;
}

.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  float: left;
  margin: 4px;
}

.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
  float: right;
  margin: 4px;
}

.daterangepicker .ranges {
  width: 160px;
  text-align: left;
}

.daterangepicker .ranges .range_inputs>div {
  float: left;
}

.daterangepicker .ranges .range_inputs>div:nth-child(2) {
  padding-left: 11px;
}

.daterangepicker .calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .calendar.single .calendar-date {
  border: none;
}

.daterangepicker .calendar th, .daterangepicker .calendar td {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-align: center;
  min-width: 32px;
}

.daterangepicker .ranges label {
  color: #333;
  display: block;
  font-size: 11px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  margin-bottom: 2px;
  text-shadow: #fff 1px 1px 0px;
  text-transform: uppercase;
  width: 74px;
}

.daterangepicker .ranges input {
  font-size: 11px;
}

.daterangepicker .ranges .input-mini {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  display: block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  margin: 0 0 10px 0;
  padding: 0 6px;
  width: 74px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.daterangepicker .ranges li {
  font-size: 13px;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #08c;
  padding: 3px 12px;
  margin-bottom: 8px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
 ...

JavaScript

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

/* https://github.com/dangrossman/bootstrap-daterangepicker */
/* : Copyright (c) 2012-2014 Dan Grossman. All rights reserved. @license: Licensed under Apache License v2.0. See http://www.apache.org/licenses/LICENSE-2.0 @website: http://www.improvely.com/ */ !function(f,e){var l=function(a,c,d){this.parentEl="body";this.element=f(a);this.parentEl="object"===typeof c&&c.parentEl&&f(c.parentEl)||f(this.parentEl);this.container=f('<div class="daterangepicker dropdown-menu"><div class="calendar left"></div><div class="calendar right"></div><div class="ranges"><div class="range_inputs"><div class="daterangepicker_start_input"><label for="daterangepicker_start"></label><input class="input-mini" type="text" name="daterangepicker_start" value="" disabled="disabled" /></div><div class="daterangepicker_end_input"><label for="daterangepicker_end"></label><input class="input-mini" type="text" name="daterangepicker_end" value="" disabled="disabled" /></div><button class="applyBtn" disabled="disabled"></button>&nbsp;<button class="cancelBtn"></button></div></div></div>').appendTo(this.parentEl); "object"!==typeof c&&(c={});this.setOptions(c,d);var g=this.container;f.each(this.buttonClasses,function(a,c){g.find("button").addClass(c)});this.container.find(".daterangepicker_start_input label").html(this.locale.fromLabel);this.container.find(".daterangepicker_end_input...