Tablesorter demo

All options included, as well as the uitheme widget

by Newton Anbarasu

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>First Name</th>
            <th>Last Name</th>
            <th>Superhero Name</th>
            <th>Fans</th>
        </tr>
        </thead>
        <tbody>
        <tr><td>Bruce</td><td>Wayne</td><td>Batman</td><td>55091123</td></tr>
        <tr class="tablesorter-childRow hide"><td colspan="4">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>

        <tr><td>Hal</td><td>Jordan</td><td>Green Latern</td><td>20090139</td></tr>
        <tr class="tablesorter-childRow hide"><td colspan="4">Hal Jordan is the most well-known Green Lantern. He was the first earthman...

CSS

.hide {
    display: none;
}

JavaScript

$('table').tablesorter({
    theme: 'blue'
});

    $("tr").not('tablesorter-childRow').on('click', function(){
        $(this).next().toggleClass('hide');
    });

    $("#toggle-invisible-woman").on('click', function(){
        $("#invisible-woman").toggleClass('hide');
    });