Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-alignChar.js"></script>
<table class="tablesorter">
    <thead>
        <tr>
            <th data-align-char="&nbsp;">AlphaNumeric</th>
            <th data-align-char="." data-align-adjust="0">Numeric</th>
            <th data-align-char="=" data-align-index="1">Animals</th>
            <th data-align-char="." data-align-index="1">Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>.423475</td>
            <td>Koala = cute = cudley</td>
            <td>search.google.com</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>23.4</td>
            <td>Ox = stinky</td>
            <td>mail.yahoo.com</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>1.0</td>
            <td>Girafee = tall</td>
            <td>http://www.facebook.com</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>7.67</td>
            <td>Bison = burger</td>
            <td>http://internship.whitehouse.gov/</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3000</td>
            <td>Chimp = banana lover</td>
            <td>about.ucla.edu/</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56.5</td>
            <td>Elephant = unforgetable</td>
            <td>http://www.wikipedia.org/</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>15.5</td>
            <td>Lion = rawr</td>
            <td>rental.nytimes.com/index.html</td>
        </tr>
        <tr>
            <td>ABC 10</td>
            <td>87.20000</td>
            <td>Zebra = stripey</td>
           ...

CSS

/* CSS needed for this widget */
 .ts-align-wrap {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}
.ts-align-wrap, .ts-align-left, .ts-align-right {
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.ts-align-left {
    text-align:right;
}
.ts-align-right {
    text-align:left;
}
/* optional - colorize alignment character in Animals column */
 td:nth-child(3) .ts-align-right i {
    color: red;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function () {

    $("table").tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'alignChar'],
        widgetOptions: {
            alignChar_wrap: '<i/>',
            alignChar_charAttrib: 'data-align-char',
            alignChar_indexAttrib: 'data-align-index',
            // percentage width adjustments
            alignChar_adjustAttrib: 'data-align-adjust'
        }
    });

});