javascript - 子标题中的 jQuery 表格排序器

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>   

在此表中，我想对第 2 行中的组列进行排序。我该怎么做？

Answer 1

表格 ( working demo ) 存在三个问题:

1. 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>
   

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 }   
       }
   });