Simple Grouping With TableSorter Plugin
Posted
by HurnsMobile
on Stack Overflow
See other posts from Stack Overflow
or by HurnsMobile
Published on 2010-06-07T18:31:50Z
Indexed on
2010/06/08
2:42 UTC
Read the original article
Hit count: 423
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>
© Stack Overflow or respective owner
