Ordenación de pares de filas con 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> 

Esto ordena simplemente la forma que yo quiero si ordena que por la primera columna, pero las otras dos columnas don No mantengo el mismo bin emparejado que busco.

¿Alguna ayuda sobre esto?

Answer 1

utilizar el nombre expand-child clase en cada fila duplicada:

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

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

Se define por la opción cssChildRow:

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

Aquí es a demo de él en acción.