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/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/cupertino/jquery-ui.css">
<table class="tablesorter">
	<thead>
		<tr>
			<th>Order #</th>
			<th>Customer</th>
			<th>PO</th>
			<th>Date</th>
			<th>Total</th>
		</tr>
	</thead>
	<tbody>
		<!-- First row expanded to reveal the layout -->
		<tr>
			<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
				<a href="#" class="toggle">SO71774</a> <!-- link to toggle view of the child row -->
			</td>
			<td>Good Toys</td>
			<td>PO348186287</td>
			<td>Jul 20, 2007</td>
			<td>$972.78</td>
		</tr>
		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>99700 Bell Road<br>Auburn, California 95603</div></td></tr>
		<tr><td rowspan="2"><a href="#" class="toggle">SO71775</a></td><td>Cycle Clearance</td><td>PO58159451</td><td>May 6, 2007</td><td>$2,313.13</td></tr>
		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>2255 254th Avenue Se<br>Albany, Oregon 97321</div></td></tr>
		<tr><td rowspan="2"><a href="#" class="toggle">SO71776</a></td><td>West Side Mart</td><td>PO19952192051</td><td>May 12, 2007</td><td>$87.09</td></tr>
		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Shipping Address</div><div>251 The Metro Center<br>Wokingham, England RG41 1QW</div></td></tr>
		<tr><td rowspan="3"><a href="#" class="toggle">SO71777</a></td><td>Demand Distributors</td><td>PO20097113391</td><td>Apr 26,...

JavaScript

$(function() {

    var $table = $('.tablesorter');

    // hide child rows & make draggable
	$table.find('.tablesorter-childRow')
        .find('td')
        .droppable({
            accept: '.draggingSiblings',
            drop: function(event, ui) {
                if ($(this).closest('tr').length){
                    $(this).closest('tr').before(
                        ui.draggable
                            .css({ left: 0, top: 0 })
                            .parent()
                            .removeClass('draggingRow')
                        );
                    $table
                        .find('.draggingSiblingsRow')
                        .removeClass('draggingSiblingsRow')
                        .find('.draggingSiblings')
                        .removeClass('draggingSiblings');
                    $table.trigger('update');
                } else {
                    return false;
                }
            }
        })
        .draggable({
            revert: "invalid",
            start: function( event, ui ) {
                $(this)
                    .parent()
                    .addClass('draggingRow')
                    .prevUntil('.tablesorter-hasChildRow')
                    .nextUntil('tr:not(.tablesorter-childRow)')
                    .addClass('draggingSiblingsRow')
                    .find('td')
                    .addClass('draggingSiblings');
            }
        })
        .hide();

	$table
		.tablesorter({
			theme : 'blue',
			// this is the default setting
			cssChildRow: "tablesorter-childRow"
		})
		.tablesorterPager({
			container: $("#pager"),
			positionFixed: false
		})
	    .delegate('.toggle', 'click' ,function(){
		    $(this)
                .closest('tr')
                .nextUntil('tr.tablesorter-hasChildRow')
                .find('td').toggle();
		    return false;
	    });

});