Question

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

这就是我的代码的样子，

<table class="grid" id="gr1" cellspacing="0" width="100%" border="1">
     <tr bgcolor="#FF0000"><th class="NOBORDER" colspan="1">&nbsp;</th>
     <th class="NOBORDER" colspan="3">A</th>
     <th class="NOBORDER" colspan="3">B</th>
     <th class="NOBORDER" colspan="3">C</th>
     <th class="NOBORDER" colspan="3">D</th>
     <th class="NOBORDER" colspan="3">E</th>
     <th class="NOBORDER" colspan="3">F</th>
     </tr>
     <tr>
     <th>Group</th> 
     <th>A1</th>
     <th>A2</th>
     <th>A3</th>
     <th>B1</th>
     <th>B2</th>
     <th>B3</th>
     <th>C1</th>
     <th>C2</th>
     <th>C3</th>
     <th>D1</th>
     <th>D2</th>
     <th>D3</th>
     <th>E1</th>
     <th>E2</th>
     <th>E3</th>
     <th>F1</th>
     <th>F2</th>
     <th>F3</th>
    </tr>

从这个表中我想要对第二行中的组列进行排序。我怎么能这样做？

Answer 1

表格（working demo）有三个问题：

tablesorter在初始化之前需要一个包含<thead>和<tbody>的表格。示例中没有显示完整的表格，因此我只能假设<tbody>也可能丢失。

<table class="grid tablesorter" id="gr1" cellspacing="0" width="100%" border="1">
    <thead>
        <tr bgcolor="#FF0000">
            <th class="NOBORDER" colspan="1">&nbsp;</th>
            <th class="NOBORDER" colspan="3">A</th>
            ...
            <th class="NOBORDER" colspan="3">F</th>
        </tr>
        <tr>
            <th>Group</th>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>B1</th>
            ...
            <th>F3</th>
        </tr>
    </thead>
    <tbody>
        <tr>...</tr>
    </tbody>
</table>

tablesorter的原始版本要求在应用任何样式之前将"tablesorter"类名添加到表中。

原始版本似乎也不适用于<thead>中的多个功能行。因此，禁用顶行中的排序以使排序在第三列中正常工作（第四列，第四列，但每组中第三列）。试试这个初始化代码：

$('table').tablesorter({
    headers : {
        0 : { sorter: false },
        1 : { sorter: false },
        2 : { sorter: false },
        3 : { sorter: false },
        4 : { sorter: false },
        5 : { sorter: false },
        6 : { sorter: false }   
    }
});

Answer 2

尝试将表格放在表格中，并将tablesorter应用于内部表格。内部表将具有第二行标题，而外部表将具有第一行。您将不得不处理css / widths，尽管这会将外部表与内部表无缝地合并。所以你的代码看起来像这样：

<table class="outerTableLook" id="OuterTable" cellspacing="0" width="100%">
 <tr bgcolor="#FF0000"><th class="NOBORDER" colspan="1">&nbsp;</th>
 <th class="NOBORDER" colspan="3">A</th>
 <th class="NOBORDER" colspan="3">B</th>
 <th class="NOBORDER" colspan="3">C</th>
 <th class="NOBORDER" colspan="3">D</th>
 <th class="NOBORDER" colspan="3">E</th>
 <th class="NOBORDER" colspan="3">F</th>
 </tr>
<tr>
<table class="grid" id="gr1" cellspacing="0" width="100%" border="1">
 <tr>
 <th>Group</th> 
 <th>A1</th>
 <th>A2</th>
 .......
</tr>  
....
</table><!--inner table -->
</tr>
</table><!-- outer table -->

subHeader中的jQuery tablesorter

2 个答案: