JQuery TableSorter click actions no effect

Question

Я должен делать что-то глупое, но я этого не вижу. На моем сайте я прикрепляю JQuery TableSorter к таблице и надеюсь провести некоторую сортировку, но клики не имеют никакого эффекта. Не происходит сортировки. Он просто остается как статическая таблица.

Вот упрощенная JSFiddle проблемы я имею:

http://jsfiddle.net/96AEE/3/

Это очень простая таблица с 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(); 
}); 

Есть ли что-то очевидное, что мне не хватает?

Answer 1

Это связано с вашей разметкой на таблице HTML.

Внутри элемента thead вам нужно использовать th-теги вместо td.

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

Рабочая JSfiddle:

http://jsfiddle.net/bybFK/

Answer 2

Попробуйте изменить строку заголовка, чтобы использовать теги <th> вместо <td> тегов.

Answer 3

Вы, безусловно, пренебрегая что-то, при создании заголовка вашей таблицы; ваш используют <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/