在jquery中排序多個html表

Question

我有一些代碼在jQuery中排序表，如下所示。

$(document).ready(function() { 
     //grab all header rows 
     $('thead th').each(function(column){ 
      $(this).addClass('sortable').click(function() { 
       var findSortKey = function($cell) { 
        return $cell.find('.sort-key').text().toUpperCase() 
        + ' ' + $cell.text().toUpperCase(); 
       }; 

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

       //step back up tree and get the rows with data 
       //for sorting 
       var $rows = $(this).parent().parent().parent().find('tbody tr').get(); 

       //loop through all the rows and find 
       $.each($rows, function(index, row) { 
        row.sortKey = findSortKey($(row).children('td').eq(column)); 
       }); 

       //compare and sort the rows alphabetically or numerically 
       $rows.sort(function(a, b) { 
        if (a.sortKey.indexOf('-') == -1){ 
         if (parseInt(a.sortKey) < parseInt(b.sortKey)) { 
          return -sortDirection; 
         } 
         if (parseInt(a.sortKey) > parseInt(b.sortKey)) { 
          return sortDirection; 
         } 
        } else { 

         if (a.sortKey < b.sortKey) { 
          return -sortDirection; 
         } 
         if (a.sortKey > b.sortKey) { 
          return sortDirection; 
         } 
        } 

        return 0; 
       }); 

       //add the rows in the correct order to the bottom of the table 
       $.each($rows, function(index, row) { 
        $('tbody').append(row); 
        row.sortKey = null; 
       }); 

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

       // identify the column to be sorted by 
       $('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted'); 

       //$('.visible td').removeClass('odd'); 
       //zebraRows('.vi') 
      }); 
     }); 
    }); 

另外，CSS

root { 
    display: block; 
} 

th.sortable { 
    color: #666; 
    cursor: pointer; 
    text-decoration: underline; 

} 
th.sortable:hover{color:black;} 
th.sorted-asc, th.sorted-desc { color:black; 
      background-color: cadetblue; 
} 

這適用於一個表，但不能用於多個表。有沒有什麼辦法可以根據表格嵌套的div的ID來做到這一點？

Answer 1

某些選擇器需要針對相關表格制定。

通過不斷改善，我到達了以下內容：

$(document).ready(function() { 
    function findSortKey($cell) { 
     return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); 
    }; 
    function sortFn(a, b) { 
     if (a.sortKey.indexOf('-') == -1) { 
      return parseInt(a.sortKey, 10) - parseInt(b.sortKey, 10); 
     } else { 
      return a.sortKey - b.sortKey; 
     } 
    } 
    $('thead th').each(function(column) { 
     $(this).addClass('sortable').click(function() { 
      var $th = $(this); 
      var sortDirection = $th.is('.sorted-asc') ? -1 : 1; 
      var $tbody = $th.closest('table').children('tbody'); 
      var rows = $tbody.children('tr').get(); 
      $.each(rows, function(index, row) { 
       row.sortKey = findSortKey($(row).children('td').eq(column)); 
      }); 
      rows.sort(function(a, b) { 
       if(sortDirection == 1) { return sortFn(a, b); }//sort asc. 
       else { return sortFn(b, a); }//reverse a and b to sort desc. 
      }); 
      $.each(rows, function(index, row) { 
       $tbody.append(row); 
       row.sortKey = null;//?? 
      }); 
      var filterSelector = ':nth-child(' + (column + 1) + ')'; 
      $th.removeClass('sorted-asc sorted-desc').filter(filterSelector).addClass((sortDirection == 1) ? 'sorted-asc' : 'sorted-desc'); 
      $tbody.children('td').removeClass('sorted').filter(filterSelector).addClass('sorted'); 
     }); 
    }); 
}); 

未經測試，因此可能需要從修正選擇調試

除此之外，最顯著的變化是拉幾個功能在外圍each()循環外並簡化分類功能。

Answer 2

如果您想要預先打包的解決方案，我過去曾使用過sortable.js。這裏的鏈接：http://www.kryogenix.org/code/browser/sorttable/

這很容易實現。