如何使用JQuery的Table SubHeadings排序

Question

我在我的UI中使用jQuery tablesorter。我有一个场景，我有一个2行标题的表。主标题和副标题。我想添加排序到subheader。我怎样才能做到这一点。

这是我的代码看起来像，

<table border="1"> 
<thead> 
<tr> 
    <td>&nbsp;</td> 
    <td colspan="3" align="center">English</td> 
    <td colspan="3" align="center">Math</td> 
    <td colspan="3" align="center">Science</td>                        
</tr> 
<tr> 
    <th>School Name</th> 
    <th>Test 1</th> 
    <th>Test 2</th> 
    <th>Test 3</th> 

    <th>Test 1</th> 
    <th>Test 2</th> 
    <th>Test 3</th> 

    <th>Test 1</th> 
    <th>Test 2</th> 
    <th>Test 3</th> 
</tr> 
</thead> 
<tbody>   
<tr> 
    <th>School 1</th> 
    <th>10</th> 
    <th>10</th> 
    <th>10</th> 

    <th>10</th> 
    <th>10</th> 
    <th>10</th> 

    <th>10</th> 
    <th>10</th> 
    <th>10</th> 
</tr>  
<tr> 
    <th>School 2</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
    <th>9</th> 
</tr> 
</tbody>  

Answer 1

这应该只是工作外的开箱进行的tablesorter。

Here is a demo使用原始版本的tablesorter。使用我的fork of tablesorter。

$(function() { 
    $('table').tablesorter({ 
     theme: 'blue', 
     widgets: ['zebra'] 
    }); 
}); 

在两种情况下，具有在tbody弄乱的表的样式th的。所以，最好使用td的tbody。

另外你会注意到原始和fork之间的区别......点击fork中的主标题对其中包含的所有列进行排序。您可以通过向主标题单元添加“sorter-false”类来禁用此功能。原始插件忽略点击。