当前位置： 文江博客话题详情

使用 TableSorter 插件进行简单分组

发布于 2024-09-04 09:30:22 字数 9325 浏览 4 评论 0原文

我正在使用 jQuery 的 Tablesorter 插件，并试图在其中添加一个非常简单的分组功能。使用以下 html/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>[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>

原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

留一抹残留的笑 2024-09-11 09:30:22

这里再多做一些工作，就会得到一些更加简洁的工作代码。将其发布给后代，请随时提出改进建议。感谢您的关注！

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

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>

回复 原文
~没有更多了~

关于作者

梦晓ヶ微光ヅ倾城

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文