使用jQuery按列值排序tbody元素

Question

我想排序表 - 所以当用户点击表标题时，它将按升序/降序排序。我已经达到了可以根据列值对表格进行排序的地步。但是，我有表行的分组（每个表体两行），我想根据每个表体的第一行的列中的值对列进行排序，但是当它重新排序表时，它希望它重新排序表体，而不是表行。

<table width="100%" id="my-tasks" class="gen-table"> 
<thead> 
    <tr> 
     <th class="sortable"><p>Name</p></th> 
     <th class="sortable"><p>Project</p></th> 
     <th class="sortable"><p>Priority</p></th> 
     <th class="sortable"><p>%</p></th> 
    </tr> 
</thead> 

<tbody> 
<tr class="sortable-row" id="44"> 
    <td><p>dfgdf</p></td><td><p>Test</p></td> 
    <td><p>1</p></td><td><p>0</p></td> 
</tr> 
<tr> 
    <td></td> 
    <td colspan="3"><p>asdfds</p></td> 
</tr> 
</tbody> 

<tbody> 
<tr class="sortable-row" id="43"> 
    <td><p>a</p></td> 
    <td><p>Test</p></td> 
    <td><p>1</p></td> 
    <td><p>11</p></td> 
</tr> 
<tr> 
    <td></td> 
    <td colspan="3"><p>asdf</p></td> 
</tr> 
</tbody> 

<tbody> 
<tr class="sortable-row" id="40"> 
    <td><p>Filter Tasks</p></td> 
    <td><p>Propel</p></td> 
    <td><p>10</p></td> 
    <td><p>10</p></td> 
</tr> 
<tr> 
    <td></td> 
    <td colspan="3"><p>Add a button to filter tasks.</p></td> 
</tr> 
</tbody> 
</table> 

随着下面的JavaScript：

jQuery(document).ready(function() { 
    jQuery('thead th').each(function(column) { 
     jQuery(this).addClass('sortable').click(function() { 

      var findSortKey = function($cell) { 
       return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); 
      }; 
      var sortDirection = jQuery(this).is('.sorted-asc') ? -1 : 1; 

      var $rows = jQuery(this).parent().parent().parent().find('.sortable-row').get(); 
      jQuery.each($rows, function(index, row) { 
       row.sortKey = findSortKey(jQuery(row).children('td').eq(column)); 
      }); 

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

      jQuery.each($rows, function(index, row) { 
       jQuery('#propel-my-tasks').append(row); 
       row.sortKey = null; 
      }); 

      jQuery('th').removeClass('sorted-asc sorted-desc'); 
      var $sortHead = jQuery('th').filter(':nth-child(' + (column + 1) + ')'); 
      sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc'); 

      jQuery('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted'); 

     }); 
    }); 
}); 

Answer 1

您需要对tbody元素进行排序，而不是对row元素进行排序。你说你自己在你的问题描述中，但你的代码实际上排序行，而不是tbodies。

第二个问题是您的排序将所有内容视为字符串，这会在对两位数字符串（“10”）排序1位数字字符串（“2”）时中断。

要修复，替换此：

 var $rows = jQuery(this).parent().parent().parent() 
      .find('.sortable-row').get(); 
     jQuery.each($rows, function(index, row) { 
      row.sortKey = findSortKey(jQuery(row).children('td').eq(column)); 
     }); 

与此：

 var $tbodies = jQuery(this).parent().parent().parent() 
      .find('.sortable-row').parent().get(); 
     jQuery.each($tbodies, function(index, tbody) { 
      var x = findSortKey(jQuery(tbody).find('tr > td').eq(column)); 
      var z = ~~(x); // if integer, z == x 
      tbody.sortKey = (z == x) ? z : x; 
     }); 

然后用$整个脚本替换$行tbodies，并与TBODY行。

例子：
http://jsbin.com/oxuva5

Answer 2

我极力推荐的jQuery插件http://tablesorter.com/而不是滚动您自己。

它功能齐全，并得到很好的支持。