subHeader中的jQuery tablesorter

我在我的UI中使用jQuery tablesorter。我有一個場景，我有一個2行標題的表。主標題和副標題。我想添加排序到subheader。我怎樣才能做到這一點。subHeader中的jQuery tablesorter

這是我的代碼看起來像，

<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行中的組列進行排序。我怎樣才能做到這一點？

來源

2013-03-21 JNPW

有三個問題與表（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 } 
    } 
});

來源

2013-03-23 13:08:08 Mottie

嘗試將表格放入表格中，並將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 -->

來源

2013-03-21 17:33:06 Vickym

subHeader中的jQuery tablesorter

回答

相關問題