JQuery可排序表插件不與標籤一起工作

我使用this來創建工作正常的網頁上的標籤。在每個選項卡中，我想要有一個these可排序表格。該表在第一個選項卡中正常工作，但所有其他選項卡中的表都顯示但無法排序。有沒有人有任何想法，爲什麼該功能不會傳遞到其他選項卡？JQuery可排序表插件不與標籤一起工作

這是我有它的代碼：

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

來源

2014-01-22 Riddle

元素ID應該是唯一的。在你的代碼中，你已經使用了ID「tablesorter-demo」三次。

爲每個tablesorter表格元素（例如「tablesorter-demo1」，「tablesorter-demo2」等）使用唯一的ID，然後對每個表格調用「tablesorter（）」。

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

如果您希望表格不同，顯然要更改「tablesorter」的輸入參數。

此外，您還沒有ID「選項」的元素，所以這就是爲什麼該tablesorter沒有被初始化。

來源

2014-01-22 16:33:25

JQuery可排序表插件不與標籤一起工作

回答

相關問題