Question

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

这就是我的代码的样子，

<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的原始版本。

并here is a demo使用我的fork of tablesorter。

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

在这两种情况下，th中的tbody会弄乱桌子的样式。因此，最好在tbody中使用td。

此外，您还要注意原始字符和字符串之间的区别...单击fork中的主标题可对其中包含的所有列进行排序。你可以通过添加＆＃34; sorter-false＆＃34;来禁用它。类到主标题单元格。原始插件忽略了点击。

如何使用Jquery对Table SubHeadings进行排序

1 个答案: