Question

我正在使用this在网页上创建标签，效果很好。在每个选项卡中，我想要一个these可排序表。该表在第一个选项卡中正常工作，但所有其他选项卡中的表都显示但无法排序。有没有人知道为什么功能不会转移到其他选项卡？

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Results</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="../bootstrap.js"></script>
    <script type="text/javascript">
        $(function() {      
            $("#tablesorter-demo").tablesorter({sortList:[[0,0]], widgets: ['zebra']});
            $("#options").tablesorter({sortList: [[0,0]], headers: { 3:{sorter: false}, 4:{sorter: false}}});
        }); 
    </script>

    <link type="text/css" rel="stylesheet" href="../CSS/jq.css">
    <link type="text/css" rel="stylesheet" href="../CSS/results.css">
    <link type="text/css" rel="stylesheet" href="../bootstrap.min.css">
</head>
<body>

    <div id="main"> 

    <a href="../index.html"><< Return to Home Page</a>

    <a name="Results"></a>
    <h1>Results</h1>

    <div class="container bs-docs-container">
        <div class="row">
            <div class="col-md-9" role="main">

                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#1" data-toggle="tab">1</a></li>
                    <li class><a href="#2" data-toggle="tab">2</a></li>
                    <li class><a href="#3" data-toggle="tab">3</a></li>
                </ul>

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="1">
                        <table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
                            <thead>
                                <tr>
                                    <th class="header">Name</th>
                                    <th class="header headerSortDown">Value 1</th>
                                    <th class="header">Value 2</th>
                                    <th class="header">Value 3</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <?php include('get_table_contents.php') ?>  
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="2">
                        <table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
                            <thead>
                                <tr>
                                    <th class="header">Name</th>
                                    <th class="header headerSortDown">Value 1</th>
                                    <th class="header">Value 2</th>
                                    <th class="header">Value 3</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <?php include('get_table_contents.php') ?>  
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="3">
                        <table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
                            <thead>
                                <tr>
                                    <th class="header">Name</th>
                                    <th class="header headerSortDown">Value 1</th>
                                    <th class="header">Value 2</th>
                                    <th class="header">Value 3</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <?php include('get_table_contents.php') ?>  
                            </tbody>
                        </table>
                    </div>
                </div>      
            </div>
        </div>
    </div>      
</body>

Answer 1

元素ID应该是唯一的。在您的代码中，您使用了ID“tablesorter-demo”三次。

为每个tablesorter表元素使用唯一ID（例如“tablesorter-demo1”，“tablesorter-demo2”等），然后为每个表调用“tablesorter（）”，例如

。

$("#tablesorter-demo1").tablesorter({sortList:[[0,0]], widgets: ['zebra']});
$("#tablesorter-demo2").tablesorter({sortList:[[0,0]], widgets: ['zebra']});

如果希望表格不同，显然可以更改“tablesorter”的输入参数。

此外，您没有ID为“options”的元素，因此这就是没有初始化tablesorter的原因。

JQuery可排序表插件不使用选项卡

1 个答案: