Im playing around with the Tablesorter plug-in for jQuery and was trying to get a very simple grouping functionality added into it. Using the follow html/js works great until you click sort again and reverse the order. The headers get moved to the bottom of the group when this happens. The following is my (admitedly hacky) attempt at it. Does anyone have any ideas?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Manipulation Test</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<link rel="stylesheet" href="tablesorter/themes/green/style.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="tablesorter/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#test_table").tablesorter({
sortForce: [[3,0]]
});
$(".group_details").hide();
$(".group_header").click(function(){
var group = $(this).attr("group");
var $expander = $(this).children("td.expanderguy")
if ($("." + group + ":visible").length){
$("." + group + "").fadeOut('fast');
$expander.html("<img src='icons/plus.gif'>");
}
else{
$("." + group + "").fadeIn('fast');
$expander.html("<img src='icons/minus.gif'>");
}
});
}
);
</script>
<style type="text/css">
.group_header td{
background-color: #888888; !important
}
</style>
</head>
<body>
<table id="test_table" class="tablesorter">
<thead>
<tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Due Date</th><th>Amount Due</th></tr>
</thead>
<tbody>
<tr class="group_header" group="group1"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Monday, June 7</td><td></td></tr>
<tr class="group_details group1"><td>Flavian</td><td>Wenceslas</td><td>fwencs@gmail.com</td><td>Monday, June 7</td><td>$100</td></tr>
<tr class="group_details group1"><td>Gordian</td><td>Ives</td><td>gives@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Saladin</td><td>Tarquin</td><td>starquin@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Urban</td><td>Cyprian</td><td>ucyprian@gmail.com</td><td>Monday, June 7</td><td>$1500</td></tr>
<tr class="group_details group1"><td>Sargon</td><td>Swithun</td><td>sswithun@gmail.com</td><td>Monday, June 7</td><td>$1100</td></tr>
<tr class="group_details group1"><td>Pompey</td><td>Ladislas</td><td>pladislas@gmail.com</td><td>Monday, June 7</td><td>$300</td></tr>
<tr class="group_details group1"><td>Attila</td><td>Hiawatha</td><td>ahiawatha@gmail.com</td><td>Monday, June 7</td><td>$200</td></tr>
<tr class="group_header" group="group2"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Tuesday, June 8</td><td></td></tr>
<tr class="group_details group2"><td>Bruce</td><td>Fenton</td><td>bfenton@gmail.com</td><td>Tuesday, June 8</td><td>$1700</td></tr>
<tr class="group_details group2"><td>Wade</td><td>Sequoia</td><td>wsequoia@gmail.com</td><td>Tuesday, June 8</td><td>$1400</td></tr>
<tr class="group_details group2"><td>Eddie</td><td>Jerold</td><td>ejerold@gmail.com</td><td>Tuesday, June 8</td><td>$1100</td></tr>
<tr class="group_details group2"><td>Lynn</td><td>Lucan</td><td>llucan@gmail.com</td><td>Tuesday, June 8</td><td>$1200</td></tr>
<tr class="group_details group2"><td>Taegan</td><td>Tadg</td><td>ttadg@gmail.com</td><td>Tuesday, June 8</td><td>$100</td></tr>
<tr class="group_details group2"><td>Clyde</td><td>Reed</td><td>creed@gmail.com</td><td>Tuesday, June 8</td><td>$6100</td></tr>
<tr class="group_details group2"><td>Alaois</td><td>Art</td><td>aart@gmail.com</td><td>Tuesday, June 8</td><td>$2100</td></tr>
<tr class="group_details group2"><td>Gilbert</td><td>Patsy</td><td>gpatsy@gmail.com</td><td>Tuesday, June 8</td><td>$1500</td></tr>
<tr class="group_header" group="group3"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Wednesday, June 9</td><td></td></tr>
<tr class="group_details group3" ><td>Clem</td><td>Eben</td><td>ceben@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3" ><td>Elijah</td><td>Julyan</td><td>ejulyan@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3" ><td>Marvyn</td><td>Damian</td><td>mdamian@gmail.com</td><td>Wednesday, June 9</td><td>$1100</td></tr>
<tr class="group_details group3" ><td>Sawyer</td><td>Ryker</td><td>sryker@gmail.com</td><td>Wednesday, June 9</td><td>$500</td></tr>
</tbody>
</table>
</body>
And with a little more toying around here is some working code that is much more concise. Posting it up for posterity, feel free to suggest improvements. Thanks for looking!