Fatal编程技术网
  • jquery/
  • Jquery 使用TableSorter插件进行简单分组

Jquery 使用TableSorter插件进行简单分组

jquery jquery-plugins

Jquery 使用TableSorter插件进行简单分组,jquery,jquery-plugins,tablesorter,Jquery,Jquery Plugins,Tablesorter,我正在使用jQuery的Tablesorter插件，并试图在其中添加一个非常简单的分组功能。在再次单击sort并颠倒顺序之前，使用followHTML/js非常有效。发生这种情况时，标题将移动到组的底部。下面是我（令人钦佩的）尝试。有人有什么想法吗 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title&

我正在使用jQuery的Tablesorter插件，并试图在其中添加一个非常简单的分组功能。在再次单击sort并颠倒顺序之前，使用followHTML/js非常有效。发生这种情况时，标题将移动到组的底部。下面是我（令人钦佩的）尝试。有人有什么想法吗

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


表格操作测试
$（文档）.ready（函数（）
{ 
$（“#test_table”）.tablesorter（{
sortForce:[[3,0]]
}); 
$（“.group_details”）.hide（）；
$（“.group_header”）。单击（函数（）{
var group=$（this.attr（“group”）；
var$expander=$（this.children（“td.expanderguy”）
if（$（“+组+”：可见）长度）{
$（“+组+”）.fadeOut（'fast'）；
$expander.html（“”）；
}
否则{
$（“+group+”）.fadeIn（'fast'）；
$expander.html（“”）；
}
});
} 
); 
.group_头td{
背景色：#888888；！重要
}
姓名姓氏电子邮件到期日到期金额
6月7日，星期一
FlavianWenceslasfwencs@gmail.comMonday，六月七日$100
GordianIvesgives@gmail.comMonday，六月七日$1700
SaladinTarquinstarquin@gmail.comMonday，六月七日$1700
UrbanCyprianucyprian@gmail.comMonday，六月七日1500元
SargonSwithunsswithun@gmail.comMonday，六月七日$1100
PompeyLadislaspladislas@gmail.comMonday，六月七日$300
AttilaHiawathaahiawatha@gmail.comMonday，六月七日$200
六月八日（星期二）
BruceFentonbfenton@gmail.comTuesday，六月八日，1700元
WadeSequoiawsequoia@gmail.comTuesday，六月八日，1400元
EddieJeroldejerold@gmail.comTuesday，六月八日$1100
LynnLucanllucan@gmail.comTuesday，六月八日1200元
TaeganTadgttadg@gmail.comTuesday，六月八日$100
ClydeReedcreed@gmail.comTuesday，六月八日，6100元
AlaoisArtaart@gmail.comTuesday，六月八日$2100
GilbertPatsygpatsy@gmail.comTuesday，六月八日，1500元
6月9日，星期三
ClemEbenceben@gmail.comWednesday，六月九日$2100
ElijahJulyanejulyan@gmail.comWednesday，六月九日$2100
MarvynDamianmdamian@gmail.comWednesday，六月九日$1100
SawyerRykersryker@gmail.comWednesday，六月九日$500

这里有一些更简洁的工作代码。为子孙后代发布，请随意提出改进建议。谢谢你的关注

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


表格操作测试
$（文档）.ready（函数（）
{ 
$（“#test_table”）.tablesorter（{
sortForce:[[3,0]]
}); 
$（“.group_details”）.hide（）；
$（“.group_header”）。单击（函数（）{
var group=$（this.attr（“id”）；
var$expander=$（this.children（“td.expanderguy”）
if（$（“+组+”：可见）长度）{
$（“+组+”）.fadeOut（'fast'）；
$expander.html（“”）；
}
否则{
$（“+group+”）.fadeIn（'fast'）；
$expander.html（“”）；
}
});
$（“#test_table”）.bind（“sortEnd”，function（）{
$（'.group_header'）。每个（函数（）{
var group=$（this.attr（“id”）；
var headerId=$（this.index（）；
var detailId=$（'.+group+':first'）.index（）；
if（headerId+1！=detailId）{
$（this.insertBefore（$（'.+group+':first'）；
}
});
});
});
.group_头td{
背景色：#888888；！重要
}
姓名姓氏电子邮件到期日到期金额
6月7日，星期一
FlavianWenceslasfwencs@gmail.comMonday，六月七日$100
GordianIvesgives@gmail.comMonday，六月七日$1700
SaladinTarquinstarquin@gmail.comMonday，六月七日$1700
UrbanCyprianucyprian@gmail.comMonday，六月七日1500元
SargonSwithunsswithun@gmail.comMonday，六月七日$1100
PompeyLadislaspladislas@gmail.comMonday，六月七日$300
AttilaHiawathaahiawatha@gmail.comMonday，六月七日$200
六月八日（星期二）
BruceFentonbfenton@gmail.comTuesday，六月八日，1700元
WadeSequoiawsequoia@gmail.comTuesday，六月八日，1400元
EddieJeroldejerold@gmail.comTuesday，六月八日$1100
LynnLucanllucan@gmail.comTuesday，六月八日1200元
TaeganTadgttadg@gmail.comTuesday，六月八日$100
ClydeReedcreed@gmail.comTuesday，六月八日，6100元
AlaoisArtaart@gmail.comTuesday，六月八日$2100
GilbertPatsygpatsy@gmail.comTuesday，六月八日，1500元
6月9日，星期三
ClemEbenceben@gmail.comWednesday，六月九日$2100
ElijahJulyanejulyan@gmail.comWednesday，六月九日$2100
MarvynDamianmdamian@gmail.comWednesday，六月九日$1100
SawyerRykersryker@gmail.comWednesday，六月九日$500

这里有一些更简洁的工作代码。为子孙后代发布，请随意提出改进建议。谢谢你的关注

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


表格操作测试
$（文档）.ready（函数（）
{ 
$（“#测试表”）.tablesorter({