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">
	<a href="#popup" class="open-popup-link">Show table in jQuery UI Dialog</a>

<div id="popup">
    <table id="table0" class="tablesorter">
        <caption>Student Grades</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th>Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th class="filter-false sorter-false">Geometry</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Major</th>
                <th>Sex</th>
                <th>English</th>
                <th>Japanese</th>
                <th>Calculus</th>
                <th>Geometry</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Student01</td>
                <td>Languages</td>
                <td>male</td>
                <td>80</td>
                <td>70</td>
                <td>75</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Student02</td>
                <td>Mathematics</td>
                <td>male</td>
                <td>90</td>
                <td>88</td>
                <td>100</td>
                <td>90</td>
            </tr>
            <tr>
                <td>Student03</td>
                <td>Languages</td>
                <td>female</td>
                <td>85</td>
                <td>95</td>
                <td>80</td>
                <td>85</td>
            </tr>
            <tr>
                <td>Student04</td>
                <td>Languages</td>
                <td>male</td>
                <td>60</td>
               ...

CSS

#popup {
    display:none;
}

JavaScript

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

    $('.open-popup-link').click(function () {
        dialog.dialog("open");
    });

    var dialog = $("#popup").dialog({
        autoOpen: false,
        height: $(window).height() - 20,
        width: 650,
        modal: true,
        open: function (event, ui) {
            // Will fire when this popup is opened
            // jQuery UI Dialog widget
            $('#table0').tablesorter({
                theme: 'blue',
                headerTemplate: '{content} {icon}', // Add icon for various themes
                widgets: ['zebra', 'filter', 'stickyHeaders'],
                widgetOptions: {
                    // jQuery selector or object to attach sticky header to
                    stickyHeaders_attachTo: '#popup',
                    stickyHeaders_offset: 0,
                    stickyHeaders_addCaption: true
                }
            });
        }
    });

});