Tablesorter、sub group sorting

Question

私は、テーブル内で別々に行グループをソートすると同時に、行グループを "グループ化された行"に固執させることができるウィジェットを作ろうとしました。私はこの問題に近づく方法を理解することができません...

編集：私は非colspan列を並べ替えるしたいです。すべてのグループはサブテーブルとして動作する必要があります

jsfiddleの基本設定、誰かが正しい方向に私をプッシュできますか？

EDIT：新しいjsfiddle http://jsfiddle.net/L8bwW/28/

Answer 1

ここではtablesorter使用していませんWorking exampleです。

重要なのは、tbody要素を使用して行をグループ化することです。次に、各tbody内の最後の行をすべてソートします。

の表は、次のようになります。

<table class="sortable"> 
    <thead> 
     <tr> <th></th> <th>A-head</th> <th>B-head</th> <th>C-head</th> </tr> 
    </thead> 
    <tfoot> 
     <tr> <td></td> <td>A-foot</td> <td>B-foot</td> <td>C-foot</td></tr> 
    </tfoot> 

    <tbody class='sortable'> 
     <tr> <td>DDD</td><td> r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr> 
     <tr> <td>AAA</td><td> r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr> 
     <tr> <td>CCC</td><td> r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr> 
     <tr> <td>BBB</td><td> r4c1</td> <td>r4c2</td> <td>r4c3</td> </tr> 
     <tr> <td colspan="4">summary info for the first group of rows</td> </tr> 
    </tbody> 

    <tbody class='sortable'> 
     <tr> <td>Zorro</td><td> r5c1</td> <td>r5c2</td> <td>r5c3</td> </tr> 
     <tr> <td>Caleb</td><td> r6c1</td> <td>r6c2</td> <td>r6c3</td> </tr> 
     <tr> <td>Momo</td><td> r7c1</td> <td>r7c2</td> <td>r7c3</td> </tr> 
     <tr> <td>Wolfie</td><td> r8c1</td> <td>r8c2</td> <td>r8c3</td> </tr> 
     <tr> <td colspan="4">summary info for rowgroup #2</td> </tr> 
    </tbody> 
    ... 

そして、それは次のようになりますのソートFN：

function SortIt() { 
     jQuery('table.sortable > tbody.sortable').each(function(index,tbody) { 
     var $rowGroup = jQuery(tbody); 

     // select all but the last row in the tbody 
     var rows = $rowGroup.find('tr:not(last-child)').get(); 

     var sortDirection = $rowGroup.is('.sorted-asc') ? -1 : 1; 

     // Set a custom property on each row - 'sortKey', the key to sort. 
     // This example uses the text in the first column. It could use 
     // any column, or any content in the row. 
     jQuery.each(rows, function(index, row) { 
      row.sortKey = jQuery(row).children('td').first().text(); 
     }); 

     // actually sort the rows 
     rows.sort(function(a, b) { 
      if (a.sortKey < b.sortKey) return -sortDirection; 
      if (a.sortKey > b.sortKey) return sortDirection; 
      return 0; 
     }); 

     // retain the summary row - the last one 
     var summaryRow = $rowGroup.find("tr:last-child"); 

     // remove all the rows from the tbody 
     $rowGroup.find("tr").remove(); 

     // append the rows in sorted order 
     jQuery.each(rows, function(index, row) { 
      $rowGroup.append(row); 
      row.sortKey = null; 
     }); 

     // append the final row 
     $rowGroup.append(summaryRow); 

     if (sortDirection == 1) { $rowGroup.addClass('sorted-asc'); } 
     else {$rowGroup.removeClass('sorted-asc'); } 

     }); 
    }