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>
[email protected]</td><td>Monday, June 7</td><td>$100</td></tr>
<tr class="group_details group1"><td>Gordian</td><td>Ives</td><td>
[email protected]</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Saladin</td><td>Tarquin</td><td>
[email protected]</td><td>Monday, June 7</td><td>$1700</td></tr>
<tr class="group_details group1"><td>Urban</td><td>Cyprian</td><td>
[email protected]</td><td>Monday, June 7</td><td>$1500</td></tr>
<tr class="group_details group1"><td>Sargon</td><td>Swithun</td><td>
[email protected]</td><td>Monday, June 7</td><td>$1100</td></tr>
<tr class="group_details group1"><td>Pompey</td><td>Ladislas</td><td>
[email protected]</td><td>Monday, June 7</td><td>$300</td></tr>
<tr class="group_details group1"><td>Attila</td><td>Hiawatha</td><td>
[email protected]</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>
[email protected]</td><td>Tuesday, June 8</td><td>$1700</td></tr>
<tr class="group_details group2"><td>Wade</td><td>Sequoia</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$1400</td></tr>
<tr class="group_details group2"><td>Eddie</td><td>Jerold</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$1100</td></tr>
<tr class="group_details group2"><td>Lynn</td><td>Lucan</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$1200</td></tr>
<tr class="group_details group2"><td>Taegan</td><td>Tadg</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$100</td></tr>
<tr class="group_details group2"><td>Clyde</td><td>Reed</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$6100</td></tr>
<tr class="group_details group2"><td>Alaois</td><td>Art</td><td>
[email protected]</td><td>Tuesday, June 8</td><td>$2100</td></tr>
<tr class="group_details group2"><td>Gilbert</td><td>Patsy</td><td>
[email protected]</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>
[email protected]</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3" ><td>Elijah</td><td>Julyan</td><td>
[email protected]</td><td>Wednesday, June 9</td><td>$2100</td></tr>
<tr class="group_details group3" ><td>Marvyn</td><td>Damian</td><td>
[email protected]</td><td>Wednesday, June 9</td><td>$1100</td></tr>
<tr class="group_details group3" ><td>Sawyer</td><td>Ryker</td><td>
[email protected]</td><td>Wednesday, June 9</td><td>$500</td></tr>
</tbody>
</table>
</body>
