Tablesorter, phân loại nhóm phụ

Question

Tôi đã cố gắng tạo một tiện ích có thể sắp xếp một nhóm các hàng riêng biệt bên trong một bảng và đồng thời làm cho nhóm hàng dính vào "các hàng được nhóm". Tôi không thể tìm ra cách tiếp cận vấn đề này ...

CHỈNH SỬA: Tôi muốn sắp xếp trên các cột không có colspan. mỗi nhóm sẽ hoạt động như một bảng phụ

Thiết lập cơ bản trong jsfiddle, bất kỳ ai có thể đẩy tôi đi đúng hướng không?

EDIT: jsfiddle mới http://jsfiddle.net/L8bwW/28/

Answer 1

Đây là một Working example mà không sử dụng tablesorter.

Điều quan trọng là sử dụng phần tử tbody để nhóm các hàng của bạn. Sau đó, sắp xếp tất cả các hàng nhưng cuối cùng, trong mỗi tbody.

Bảng có thể trông như thế này:

<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> 
    ... 

Và một loại fn cho nó có thể trông như thế này:

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'); } 

     }); 
    }