2012-12-04 20 views
0

的tablesorter和jQuery的jQuery的tablesorter - 排序與合併單元格

我用http://tablesorter.com/docs/一個項目。

信息

我已經合併/ colspaned兩個列標題爲一體。這意味着第三列的一個排序缺失。

的jsfiddle

http://jsfiddle.net/RqN8a/18/

問題

我可以強制添加的最後一列的排序回合並/ colspaned頭?

HTML(如果的jsfiddle不工作)

<p> 
<strong>This works</strong> 
</p> 

<table class="tablesorter"> 
<thead> 
<tr> 
    <th>Heading1</th> 
    <th>Heading2</th> 
    <th>Heading3</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Data1a</td> 
    <td>Data2a</td> 
    <td>Data3a</td> 
</tr> 
    <tr> 
    <td>Data1b</td> 
    <td>Data2b</td> 
    <td>Data3b</td> 
</tr> 
</tbody> 
</table> 

<p> 
    <strong>Can this work?</strong><br> 
    Another arrow should be added for sorting the "Data3" column 
</p> 

<table class="tablesorter"> 
<thead> 
<tr> 
    <th>Heading1</th> 
    <th colspan="2">? Heading2</th> 
</tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Data11</td> 
     <td>Data2c</td> 
     <td>Data3a</td> 
    </tr> 
    <tr> 
     <td>Data12</td> 
     <td>Data2b</td> 
     <td>Data3b</td> 
    </tr> 
    <tr> 
     <td>Data13</td> 
     <td>Data2a</td> 
     <td>Data3c</td> 
    </tr> 
</tbody> 
</table> 

內嵌的jQuery(萬一的jsfiddle不工作)

$(document).ready(function() { 
    $("table").tablesorter({ 
    }); 
}); 

+0

退房[這個演示](http://mottie.github.com/tablesorter/ docs/example-header-column-span.html)使用我的[fork of tablesorter](http://mottie.github.com/tablesorter/docs/)。 – Mottie

回答

1

至於我知道,沒有必要改變很多。

只要改變你的第二個HTML如下實現你的願望: -

<table class="tablesorter2"> 
    <thead> 
     <tr> 
      <th rowspan="2">Heading1</th> 
      <th colspan="2">Heading 2 and 3</th> 
     </tr> 
     <tr> 
      <th>Heading2</th> 
      <th>Heading3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Data11</td> 
      <td>Data2c</td> 
      <td>Data3a</td> 
     </tr> 
     <tr> 
      <td>Data12</td> 
      <td>Data2b</td> 
      <td>Data3b</td> 
     </tr> 
     <tr> 
      <td>Data13</td> 
      <td>Data2a</td> 
      <td>Data3c</td> 
     </tr> 
    </tbody> 
</table> 

參考LIVE DEMO