Tablesorter demo
All options included, as well as the uitheme widget
by Dipak1991
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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<button class="add">Add Row</button> (then look for first name "James" in the select filter)
<br>
<table class="tablesorter">
<thead>
<tr>
<!-- add "filter-select" class or filter_functions : { 0: true } -->
<!-- add "filter-match" class to just match the content, so selecting "Denni" will also show "Dennis" -->
<th class="filter-select" data-placeholder="Select a name">First Name</th>
<th data-placeholder="Exact matches only">Last Name</th>
<th data-placeholder="Choose a city">City</th>
<th>Age</th>
<th data-placeholder="Select a filter">Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>Johnson Sr</td>
<td>Atlanta</td>
<td>35</td>
<td>$5.95</td>
<td>22%</td>
<td>Jun 26, 2004 7:22 AM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Johnson</td>
<td>Yuma</td>
<td>12</td>
<td>$2.99</td>
<td>5%</td>
<td>Aug 21, 2009 12:21 PM</td>
</tr>
<tr>
<td>Clark</td>
<td>Henry Jr</td>
<td>Tampa</td>
<td>51</td>
<td>$42.29</td>
<td>18%</td>
<td>Oct 13, 2000 1:15...JavaScript
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
// headers: { 5: { sorter: false, filter: false } },
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
// jQuery selector string of an element used to reset the filters
filter_reset : '.reset',
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 300,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : false,
// Add select box to 4th column (zero-based index)
// each option has an...