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>
<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">
    <table id="tablesorter-demo" class="tablesorter">
        <thead>
            <tr>
                <th>Account #</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Total</th>
                <th>Discount</th>
                <th>Difference</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A42b</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>28</td>
                <td>$9.99</td>
                <td>20.9%</td>
                <td>+12.1</td>
                <td>11/1/12 8:14 AM</td>
            </tr>
            <tr>
                <td>A255</td>
                <td>John</td>
                <td>Hood</td>
                <td>33</td>
                <td>$19.99</td>
                <td>25%</td>
                <td>+12</td>
                <td>1/1/13</td>
            </tr>
            <tr>
                <td>A33</td>
                <td>Clark</td>
                <td>Kent</td>
                <td>18</td>
      ...

JavaScript

$.tablesorter.addParser({
    id: "ddmmyy",
    is: function(s) {
        return false;
    },
    format: function(s, table, cell, cellIndex) {
        s = s
            // replace separators
            .replace(/\s+/g," ").replace(/[\-|\.|\,]/g, "/")
            // reformat dd/mm/yy to mm/dd/yy
            .replace(/(\d{1,2})[\/\s](\d{1,2})[\/\s](\d{2})/, "$2/$1/$3");
        var d = new Date(s), y = d.getFullYear();
        // if date > 50 years old, add 100 years
        // this will work when people start using "70" and mean "2070"
        if (new Date().getFullYear() - y > 50) {
            d.setFullYear( y + 100 );
        }
        return d.getTime();
    },
    type: "numeric"
});

$('table').tablesorter({

    // *** APPEARANCE ***
    // Add a theme - try 'blackice', 'blue', 'dark', 'default'
    //  'dropbox', 'green', 'grey' or 'ice'
    // to use 'bootstrap' or 'jui', you'll need to add the "uitheme"
    // widget and also set it to the same name
    // this option only adds a table class name "tablesorter-{theme}"
    theme: 'blue',

    headers: {
        7: {
            sorter: "ddmmyy"
        }
    },

    // initial sort order of the columns, example sortList: [[0,0],[1,0]],
    // [[columnIndex, sortDirection], ... ]
    sortList: [[7, 0]],

    // include zebra and any other widgets, options:
    // 'columns', 'filter', 'stickyHeaders' & 'resizable'
    // 'uitheme' is another widget, but requires loading
    // a different skin and a jQuery UI theme.
    widgets: ['zebra', 'columns']

});