2013-03-27 107 views
1

我使用tablesorter插件排序表。TableSorter - 選擇與colspan排序

信息

  • 我有一個個跨越了兩個不同的TD。我仍然需要排序,好像th是兩個:s。
  • 「Testing2」未按預期工作。它應該對第三列進行排序。

的jsfiddle

我已經做另一個人的更新的jsfiddle。因爲我沒有直接在這裏粘貼他的整個代碼。

jQuery的

$('table').tablesorter(); 
$('select').change(function(){ 
    var column = parseInt($(this).val(), 10), 
     direction = 1, // 0 = descending, 1 = ascending 
     sort = [[ column, direction ]]; 
    if (column >= 0) { 
     $('table').trigger("sorton", [sort]); 
    } 
}); 

http://jsfiddle.net/Yke6M/53/

回答

1

我認爲最簡單的解決辦法是增加一個隱藏的行不具有colspandemo):

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Alphabetic</th> 
      <th colspan="2" style="text-align: center;">Testing</th> 
      <th>Animals</th> 
     </tr> 
     <tr class="hidden"> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 

然後相應地修改你的下拉列表

<select> 
    <option value="-">Choose a column</option> 
    <option value="0">Alphabetic</option> 
    <option value="1">Testing</option> 
    <option value="2">Testing2</option> 
    <option value="3">Animals</option> 
</select> 

我不知道爲什麼我有這樣一個困難時期隱藏在該行的jsfiddle,但我最終修改CSS來此:

th, tbody td { 
    background: #eee; 
    border: 1px solid #ccc; 
    padding: 10px; 
} 
tr.hiddden { 
    display: none; 
} 
+0

幾乎hackish的,但它的偉大工程! – 2013-03-28 08:23:55