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">
<h2><a href="http://www.imdb.com/chart/top">IMDB top 250 movies</a> (3/31/2012)</h2>

<table>
    <thead>
        <tr>
            <th><strong>Rank</strong></th>
            <th><strong>Rating</strong></th>
            <th><strong>Title</strong></th>
            <th><strong>Votes</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>1.</strong></td>
            <td>9.2</td>
            <td><a href="http://www.imdb.com/title/tt0111161/">The Shawshank Redemption</a> (1994)</td>
            <td>734,327</td>
        </tr>
        <tr>
            <td><strong>2.</strong></td>
            <td>9.2</td>
            <td><a href="http://www.imdb.com/title/tt0068646/">The Godfather</a> (1972)</td>
            <td>548,857</td>
        </tr>
        <tr>
            <td><strong>3.</strong></td>
            <td>9.0</td>
            <td><a href="http://www.imdb.com/title/tt0071562/">The Godfather: Part II</a> (1974)</td>
            <td>346,072</td>
        </tr>
        <tr>
            <td><strong>4.</strong></td>
            <td>8.9</td>
            <td><a...

CSS

table a { color: #0af; }

JavaScript

/*
 * This parser will remove "The", "A" and "An" from
 * the beginning of a book or movie title, so it 
 * sorts by the second word or number
 */
$.tablesorter.addParser({
    id: 'ignoreLeads',
    is: function(s) {
        return false;
    },
    format: function(s) {
        return (s || '').replace(/^(The|A|An)\s/i, '');
    },
    type: 'text'
});

$(function() {
    $('table').tablesorter({
        theme: 'blackice',
        widgets: ['zebra'],
        sortList: [[2, 0]],
        headers: {
            2: {
                sorter: 'ignoreLeads'
            }
        }
    });
});