开发者

Simple Grouping With TableSorter Plugin

问答 作者：

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!

<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>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" 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>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" 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>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>

继续阅读：jqueryjquery-pluginstablesorter

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9