JQuery TableSorter點擊操作沒有效果

我一定在做一些愚蠢的錯誤，但我沒有看到它。在我的網站上，我將JQuery TableSorter附加到表中，並希望進行一些排序，但點擊沒有任何效果。沒有排序發生。它只是作爲一個靜態表格。JQuery TableSorter點擊操作沒有效果

這裏是我遇到的問題的一個簡化的jsfiddle：

它是用JavaScript一個非常簡單的表如下：

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates"> 
    <thead> 
     <tr class="nav"> 
      <td> 
       <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" /> 
      </td> 
      <td>Gift Cert</td> 
      <td>Note</td> 
      <td>Order #</td> 
      <td>Order Date</td> 
      <td>Amount</td> 
      <td>Redeemed</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td valign="top"></td> 
      <td>ss1q</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$300.00</td> 
      <td> <a href="test.php">Sale</a> 

      </td> 
      <td>true</td> 
     </tr> 
     <tr> 
      <td valign="top"> 
       <input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" /> 
      </td> 
      <td>443ss</td> 
      <td>(1d10t) Arizona Tea</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$50.00</td> 
      <td>-</td> 
     </tr> 
     <tr> 
      <td valign="top"> 
       <input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" /> 
      </td> 
      <td>199e</td> 
      <td>(#9000) Over</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$300.00</td> 
      <td>-</td> 
     </tr> 
     <tr> 
      <td valign="top"> 
       <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" /> 
      </td> 
      <td>F990</td> 
      <td>($09aa) Trouble</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$300.00</td> 
      <td>-</td> 
     </tr> 
    </tbody> 
</table>

的JavaScript：

$(document).ready(function() { 
    $(".tablesorter").tablesorter(); 
});

有什麼明顯的我失蹤了嗎？

來源

2013-10-10 cedmans

如果你有興趣，我有一個[ fork of tablesorter]（http://mottie.github.io/tablesorter/docs/），它有很多增強功能......並且它還允許在表頭中使用「td」。 – Mottie

這是由於您在HTML表格上的標記。

在thead元素中，您需要使用th標籤而不是td。

<thead> 
    <tr> 
     <th></th> 
     ... 
    </tr> 
</thead>

工作的jsfiddle：

http://jsfiddle.net/bybFK/

來源

2013-10-10 17:03:18

嘗試更改標題行以使用<th>標記而不是<td>標記。

來源

2013-10-10 17:01:16

你肯定忽略了一些東西，創建表的標題時;您正在使用<td>而不是使用<th> 你也不需要指定類tablesorter to your table

<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates"> 
    <thead> 
     <tr class="nav"> 
      <th> 
       <input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" /> 
      </th> 
      <th>Gift Cert</th> 
      <th>Note</th> 
      <th>Order #</th> 
      <th>Order Date</th> 
      <th>Amount</th> 
      <th>Redeemed</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td valign="top"></td> 
      <td>ss1q</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$300.00</td> 
      <td> <a href="test.php">Sale</a> 

      </td> 
      <td>true</td> 
     </tr> 
<tr> 
      <td valign="top"> 
       <input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" /> 
      </td> 
      <td>F990</td> 
      <td>($09aa) Trouble</td> 
      <td>-</td> 
      <td>-</td> 
      <td>$300.00</td> 
      <td>-</td> 
     </tr> 
    </tbody> 
</table>

的JavaScript：

$(document).ready(function() { 
     $("#gift_certificates").tablesorter(); 
    });

http://tablesorter.com/docs/

來源

2013-10-10 17:13:01 Tauseef

JQuery TableSorter點擊操作沒有效果

回答

相關問題