Sortowanie par wierszy z 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> 

ta sortuje tak, jak chcę go, jeśli rozwiązać to przez pierwszą kolumnę, ale pozostałe dwie kolumny don nie zachowują tej samej pary, której szukam.

Każda pomoc w tej sprawie?

Answer 1

Użyj nazwy expand-child klasy na każdym powielane rzędu:

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

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

Jest zdefiniowany przez opcję cssChildRow:

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

Oto a demo go w akcji.