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">
<table class="tablesorter">
    <thead>
        <tr>
            <th class="Customer group-false"></th>
            <th class="group-word">Order</th>
            <th class="group-false">Status</th>
            <th class="group-false">Priority</th>
            <th class="group-false">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3"><a href="#" class="toggle">Good Toys</a><a></a>

            </td>
            <td>USA</td>
            <td>80%</td>
            <td></td>
            <td></td>
        </tr>
        <tr class="tablesorter-childRow">
            <td>1561651</td>
            <td>finish</td>
            <td>0</td>
            <td>$5</td>
        </tr>
        <tr class="tablesorter-childRow">
            <td>558815</td>
            <td>finish</td>
            <td>0</td>
            <td>$55</td>
        </tr>
        <tr>
            <td rowspan="3"><a href="#" class="toggle">Cycle Clearance</a>

            </td>
            <td>FRANCE</td>
            <td>25%</td>
            <td></td>
            <td></td>
        </tr>
        <tr...

CSS

/* extra css needed because there are 5 child rows */

/* no zebra striping */
 .tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter-blue tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
/* with zebra striping */
 .tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td .tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td .tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter-blue tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
    background: #d9d9d9;
}
.tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td, .tablesorter-blue tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
    background: #bfbfbf;
}
/* Grouping widget css */
 tr.group-header td {
    background: #eee;
}
.group-name {
    text-transform: uppercase;
    font-weight: bold;
}
.group-count {
    color: #999;
}
.group-hidden {
    display: none !important;
}
.group-header, .group-header td {
    user-select: none;
    -moz-user-select:...

JavaScript

$(function () {

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

	// Save Child Row open/closed state; restore on page refresh
	// See https://github.com/Mottie/tablesorter/issues/595
	toggleChildren = function (el, startup) {
		var state = [],
			$rows = $(el)
				// add "opened" class to toggle
				.toggleClass('opened')
				// find parent row
				.closest('tr')
				// find associated child rows
				.nextUntil('tr:not(.tablesorter-childRow)');
		// toggle the cells of the child rows
		$rows.find('td').toggle();
		// get toggle element text
		$table.find('.toggle.opened').each(function(){
			state.push( $(this).text() );
		});
		// save open toggle text
		if (startup !== true) {
			$.tablesorter.storage( $table, 'childRows', state );
		}
	};

	$table.tablesorter({
		theme: 'blue',
		sortList: [[1, 0]],
		widgets: ['group', 'filter'],
		widgetOptions: {
			group_collapsible: true,
			group_collapsed: false,
			group_count: false,
			filter_childRows: true,
		},

		// restore child row states
		initialized : function(){
			$table.find('.tablesorter-childRow td').hide();
			var $cell,
			states = $.tablesorter.storage( $table, 'childRows' ) || [];
			$.each(states, function(i, s){
				$cell = $table.find('.toggle:contains("' + s + '")');
				if ($cell.length) {
					toggleChildren($cell, true);
				}
			});
		}

	});

	// make toggles clickable
	$table.on('click', '.toggle', function () {
		toggleChildren(this);
		return false;
	});

});