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='clear'>Clear</button>
<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>
           ...

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