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 class="tablesorter">
        <thead>
            <tr>
                <th>Distance</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>3'</td></tr>
            <tr><td>11"</td></tr>
            <tr><td>5'</td></tr>
            <tr><td>3"</td></tr>
            <tr><td>&frac12;"</td></tr>

            <tr><td>5' 11"</td></tr>
            <tr><td>10' 11"</td></tr>
            <tr><td>10' 1"</td></tr>
            <tr><td>10' 4"</td></tr>
            <tr><td>5' 9"</td></tr>

            <tr><td>5' 3/4"</td></tr>
            <tr><td>5' 5/8"</td></tr>
            <tr><td>5' 3 1/2"</td></tr>

            <tr><td>10' 3&#8539;"</td></tr>

            <tr><td>10' 2&#8540;"</td></tr>
            <tr><td>10' 3&#8541;"</td></tr>
            <tr><td>10' 2&#8542;"</td></tr>
            <tr><td>5' 3&frac14;"</td></tr>
            <tr><td>5    '   2   &frac12;        "</td></tr>
            <tr><td>10' 2&frac34;"</td></tr>

            <tr><td>5' 2 &frac12;"</td></tr>
            <tr><td>5' 2.5"</td></tr>

            <tr><td>5' 2 1/2"</td></tr>

            <tr><td> 10  ' 1  ...

CSS

table.tablesorter { margin-left: 20px; width: 100px; }

JavaScript

$(function(){

    $.tablesorter.addParser({
        // set a unique id
        id: 'distance',
        is: function(s) {
            // return false so this parser is not auto detected
            return false;
        },
        format: function(s) {
            var d, f, i = 0, t, p = 0;
            // look for feet symbol = '
            d = (/^(\s+)?\d+(\s+)?\'/.test(s)) ? s.split("'") : [0,s];
            // *** feet ***
            f = d[0];

            // *** inches ***
            if (typeof(d[1]) !== 'undefined') {
                // trim outside spaces and remove the inches symbol = "
                i = $.trim(d[1].replace(/\"/,''));

                // look for a space in the first part of the inches: "10 3/4" and save the "10"
                if (/\s/.test(i)) {
                    p = parseFloat(i.split(' ')[0]);
                    // remove stuff to the left of the space
                    i = $.trim(i.substring(i.indexOf(' '), i.length));
                }

                // look for a "/" to calculate fractions
                if (/\//.test(i)) {
                    t = i.split('/');
                    // turn 3/4 into .75; make sure we don't divide by zero
                    i = p + parseInt(t[0], 10) / parseInt(t[1] || 1, 10);
                // look for non-words (anything but the below symbols will be replaced with "undefined")
                } else if (/\W/.test(i)) {
                    i = p + i.replace(/\W/g, function(m){
                        return {
                            '.' : '.',    // leave decimal, just in case
                            '⅛' : '.125', // 1/8
                            '⅜' : '.375', // 3/8
                            '⅝' : '.625', // 5/8
                            '⅞' : '.875', // 7/8
                            '¼' : '.25',  // 1/4
                            '½' : '.5',   // 1/2
                            '¾' : '.75'   // 3/4
                        }[m];
                    });
               ...