Sorting cặp hàng với tablesorter

Question

http://jsfiddle.net/9sKwJ/66/

tr.spacer { height: 40px; } 

$.tablesorter.addWidget({ 
    id: 'spacer', 
    format: function(table) { 
     var c = table.config, 
     $t = $(table), 
     $r = $t.find('tbody').find('tr'), 
     i, l, last, col, rows, spacers = []; 
     if (c.sortList && c.sortList[0]) { 
      $t.find('tr.spacer').removeClass('spacer'); 
      col = c.sortList[0][0]; // first sorted column 
      rows = table.config.cache.normalized; 
      last = rows[0][col]; // text from first row 
      l = rows.length; 
      for (i=0; i < l; i++) { 
       // if text from row doesn't match last row, 
       // save it to add a spacer 
       if (rows[i][col] !== last) { 
        spacers.push(i-1); 
        last = rows[i][col]; 
       } 
      } 
      // add spacer class to the appropriate rows 
      for (i=0; i<spacers.length; i++){ 
       $r.eq(spacers[i]).addClass('spacer'); 
      } 
     } 
    } 
}); 


$('table').tablesorter({ 
    widgets : ['spacer'] 
}); 

<table id="test"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Number</th> 
     <th>Another Example</th> 
    </tr> 
    </thead> 
<tbody> 

    <tr> 
    <td>Test4</td> 
    <td>4</td> 
    <td>Hello4</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test4</td> 
    </tr> 

    <tr> 
    <td>Test3</td> 
    <td>3</td> 
    <td>Hello3</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test3</td> 
    </tr> 

    <tr> 
    <td>Test2</td> 
    <td>2</td> 
    <td>Hello2</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test2</td> 
    </tr> 

    <tr> 
    <td>Test1</td> 
    <td>1</td> 
    <td>Hello1</td> 
    </tr>   

    <tr> 
    <td colspan="3">Test1</td> 
    </tr> 
</tbody> 
</table> 

này phân loại chỉ là cách tôi muốn nó nếu bạn sắp xếp nó bằng cách cột đầu tiên, nhưng hai cột khác don 't duy trì cùng một loại' tr 'sắp xếp im tìm kiếm.

Bất kỳ trợ giúp nào về điều này?

Answer 1

Sử dụng tên expand-child lớp trên mỗi hàng nhân đôi:

<tr> 
    <td>Test3</td> 
    <td>3</td> 
    <td>Hello3</td> 
</tr>   

<tr class="expand-child"> 
    <td colspan="3">Test3</td> 
</tr> 

Nó được xác định bởi tùy chọn cssChildRow:

$('table').tablesorter({ 
    cssChildRow: "expand-child" 
});​ 

Đây là a demo của nó trong hành động.