2012-12-04 3 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를 지금까지와 같은

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

+0

체크 아웃을 참조하십시오 docs/example-header-column-span.html)에서 my [tablesforporter 포크] (http://mottie.github.com/tablesorter/docs/)를 사용하십시오. – Mottie

답변

1

(경우에 jsFiddle가 작동하지 않습니다) 나는 많은 것을 바꿀 필요가 없다는 것을 알고있다. 당신의 소원을 달성하기 위해 다음과 같이

그냥 두 번째 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> 

는 http://mottie.github.com/tablesorter/ ([데모]를 LIVE DEMO