Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="//mottie.github.com/tablesorter/css/theme.blue.css">
<script src="//mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="//mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<table id="table" class="tablesorter-blue">
    <thead>
        <tr>
            <th></th>
            <th colspan="6">2014</th>
            <th colspan="6">2013</th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">Ordered</th>
            <th colspan="2">Completed</th>
            <th colspan="2">Shipped</th>
            <th colspan="2">Ordered</th>
            <th colspan="2">Completed</th>
            <th colspan="2">Shipped</th>
        </tr>
        <tr>
            <th class="filter-select">Month</th>
            <th>#</th>
            <th>$</th>
            <th>#</th>
            <th>$</th>
            <th>#</th>
            <th>$</th>
            <th>#</th>
            <th>$</th>
            <th>#</th>
            <th>$</th>
            <th>#</th>
            <th>$</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>January</th>
            <td>13</td>
            <td>$ 1200</td>
            <td>17</td>
            <td>$ 12340</td>
            <td>5</td>
            <td>$ 6000</td>
            <td>13</td>
            <td>$ 1500</td>
            <td>31</td>
            <td>$ 1780</td>
            <td>64</td>
            <td>$ 1110</td>
        </tr>
        <tr>
            <th>February</th>
            <td>33</td>
            <td>$ 1330</td>
            <td>14</td>
            <td>$ 15060</td>
            <td>8</td>
            <td>$ 1700</td>
            <td>9</td>
            <td>$ 2300</td>
            <td>1</td>
            <td>$ 2050</td>
            <td>8</td>
            <td>$ 2450</td>
        </tr>
        <tr>
            <th>July</th>
            <td>8</td>
            <td>$ 1220</td>
            <td>12</td>
            <td>$ 16560</td>
           ...

CSS

/*
Filter select options sorted using a custom parser:
The Month column sorts names using the "month" parser
*/

JavaScript

$(function () {

    $(function () {
        $.tablesorter.addParser({
            id: 'month',
            is: function (s) {
                return false;
            },
            format: function (s, table, cell, cellIndex) {
                return s.toLowerCase()
                    .replace(/^january$/, 0)
                    .replace(/^february$/, 1)
                    .replace(/^march$/, 2)
                    .replace(/^april$/, 3)
                    .replace(/^may$/, 4)
                    .replace(/^june$/, 5)
                    .replace(/^july$/, 6)
                    .replace(/^august$/, 7)
                    .replace(/^september$/, 8)
                    .replace(/^october$/, 9)
                    .replace(/^november$/, 10)
                    .replace(/^december$/, 11);
            },
            type: 'text'
        });

        $('#table').tablesorter({
            // debug: true,
            headers: {
                0: {
                    sorter: false
                },
                3: {
                    sorter: false
                },
                10: {
                    sorter: 'month'
                }
            },
            widgets: ['zebra', 'columns', 'filter'],
            // sortList: [[ 0, 0 ]],
            widgetOptions: {
                filter_liveSearch: false,
                filter_placeholder: {
                    search: 'Search...',
                    from: 'From...',
                    to: 'To...',
                    select: ''
                }
            }
        });
    });

});