ansaurus

Question

Answer 1

A:

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!

<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("id");
                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'>");
                }
            });

            $("#test_table").bind("sortEnd",function() { 
                $('.group_header').each(function(){
                    var group = $(this).attr("id");
                    var headerId = $(this).index();
                    var detailId = $('.' + group + ':first').index();
                    if (headerId + 1 != detailId){
                        $(this).insertBefore($('.' + group + ':first'));
                    }
                });
            });
        });
    </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" id="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" id="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" id="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>

HurnsMobile 2010-06-08 02:37:43

ansaurus

tags:

views:

answers:

Simple Grouping With TableSorter Plugin

related questions