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>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Versions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>6.0.2</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>6.0</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>6.0.5</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>6.0.10</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>5.0.1</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>6</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
            <td>Lion</td>
           ...

JavaScript

$(function () {

    /************************
      Generic version parser
     ************************/
    // set the number of blocks
    // e.g. 2 = 000.000
    // and 3 = 000.000.000
    var blocks = 3,
        // length of each block
        // 3 = 000
        // 4 = 0000
        digits = 3;

    $.tablesorter.addParser({
        id: "versions",
        is: function (s) {
            return false;
        },
        format: function (s, table) {
            var i,
            a = s ? s.split(".") : [],
                r = "",
                d = new Array(digits + 1).join('0');

            for (i = 0; i < blocks; i++) {
                r += (d + (a[i] || 0)).slice(-digits);
            }
            return s ? $.tablesorter.formatFloat(r, table) : s;
        },
        type: "numeric"
    });


    $('table').tablesorter({
        theme: 'blue',
        headers: {
            3: {
                sorter: "versions"
            }
        }
    });

});