Tablesorter demo

All options included, as well as the uitheme widget

by Dipak1991

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://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p><span>test1</span>
 <pre><code>$( "#tabs" ).tabs(); </code></pre>

        <table class="tablesorter">
            <thead>
                <tr>
                    <th>AlphaNumeric</th>
                    <th>Numeric</th>
                    <th>Animals</th>
                    <th>Sites</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>abc 123</td>
                    <td>10</td>
                    <td>Koala</td>
                    <td>http://www.google.com</td>
                </tr>
                <tr>
                    <td>abc 1</td>
                    <td>234</td>
                    <td>Ox</td>
                    <td>http://www.yahoo.com</td>
                </tr>
                <tr>
                    <td>abc 9</td>
                    <td>10</td>
                    <td>Girafee</td>
                    <td>http://www.facebook.com</td>
                </tr>
                <tr>
                    <td>zyx 24</td>
                    <td>767</td>
                    <td>Bison</td>
                    <td>http://www.whitehouse.gov/</td>
                </tr>
                <tr>
                    <td>abc 11</td>
                    <td>3</td>
                    <td>Chimp</td>
                   ...

JavaScript

var tablesorterOptions = {
    theme: 'blue',
    widgets: ["zebra"]
};

$("#tabs").tabs({
    create: function (event, ui) {
        var $t = ui.panel.find('table');
        if ($t.length) {
            $t.tablesorter(tablesorterOptions);
        }
    },
    activate: function (event, ui) {
        var $t = ui.newPanel.find('table');
        if ($t.length) {
            if ($t[0].config) {
                $t.trigger('applyWidgets');
            } else {
                $t.tablesorter(tablesorterOptions);
            }
        }
    }
});