टेबेलॉर्टर, उप समूह सॉर्टिंग

Question

मैंने एक विजेट बनाने की कोशिश की है जो पंक्तियों के समूह को तालिका के अंदर अलग से क्रमबद्ध कर सकती है और साथ ही पंक्ति समूह को "समूहीकृत पंक्तियों" के साथ चिपकने के लिए भी बना सकती है। मैं इस समस्या से संपर्क करने के बारे में नहीं समझ सकता ...

संपादित करें: मैं गैर colspan कॉलम को सॉर्ट करना चाहता हूं। प्रत्येक समूह को उप-तालिका

जेएसफ़िडल में मूल सेटअप, क्या कोई मुझे सही दिशा में धक्का दे सकता है?

संपादित करें: नया jsfiddle http://jsfiddle.net/L8bwW/28/

Answer 1

यहाँ एक Working example कि tablesorter का उपयोग नहीं करता है।

कुंजी आपकी पंक्तियों को समूहित करने के लिए 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'); } 

     }); 
    }