1

我在我的 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>

从此表中，我想对第二行中的组列进行排序。我怎样才能做到这一点？

4

2 回答 2

2

该表存在三个问题（工作演示）：

  1. tablesorter在初始化之前需要一个带有<thead>and的表。<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>

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

  3. 原始版本似乎也不适用于<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 }   
    }
});
于 2013-03-23T13:08:08.540 回答
0

尝试将表格放在表格中，并将表格分类器应用于内部表格。内表将具有第二行标题，而外部表将具有第一行。您将不得不处理 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 -->
于 2013-03-21T17:33:06.337 回答