當我們單擊表格標題時對錶格中的行進行排序

Question

我有一個表格中的表格行排序任務。表中的數據是日期，數字，字符串等的一切的混合物等。

我已經經歷了很多鏈接，我發現有一些鏈接指向準備好的庫。這對我沒有用處。最後，我經歷了很多我已經用自己所有的雀斑和碎片製作出來的東西。這是數

這唯一的工作是腳本：

$(document).ready(function() { 

     //grab all header rows 
     $('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; 
        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'); 
       }); 
      }); 
     }); 

這是文檔的樣式：

<style> 
    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; 
    } 
</style> 

所以下面是HTML的一部分。

<table> 
    <tbody> 
     <tr> 
      <th class="sortable">Name</th> 
      <th class="sortable">Salary</th> 
      <th>Extension</th> 
      <th>Start date</th> 
      <th>Start date (American)</th> 
     </tr> 
     <tr> 
      <td>Bloggs, Fred</td> 
      <td>$12000.00</td> 
      <td>1353</td> 
      <td>18/08/2003</td> 
      <td>08/18/2003</td> 
     </tr> 
     <tr> 
      <td>Turvey, Kevin</td> 
      <td>$191200.00</td> 
      <td>2342</td> 
      <td>02/05/1979</td> 
      <td>05/02/1979</td> 
     </tr> 
     <tr> 
      <td>Mbogo, Arnold</td> 
      <td>$32010.12</td> 
      <td>2755</td> 
      <td>09/08/1998</td> 
      <td>08/09/1998</td> 
     </tr> 
     <tr> 
      <td>Shakespeare, Bill</td> 
      <td>$122000.00</td> 
      <td>3211</td> 
      <td>12/11/1961</td> 
      <td>11/12/1961</td> 
     </tr> 
     <tr> 
      <td>Shakespeare, Hamnet</td> 
      <td>$9000</td> 
      <td>9005</td> 
      <td>01/01/2002</td> 
      <td>01/01/2002</td> 
     </tr> 
     <tr> 
      <td>Fitz, Marvin</td> 
      <td>$3300</td> 
      <td>5554</td> 
      <td>22/05/1995</td> 
      <td>05/22/1995</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

聽起來像家庭作業，這很好，因爲你已經表明了自己的一些努力。如果你不允許tablesorter，下載它，我認爲有一個調試版本，並看看代碼。這應該有助於你的追求。

如果這是家庭作業，請記住在現實世界中，編程的黃金法則是不要重新發明輪子。如果有插件滿足您的需求，請使用它。

固定你有

的問題與您的代碼是什麼，因爲它代表的是：

if (a.sortKey.indexOf('-') == -1) { 
    if (parseInt(a.sortKey) < parseInt(b.sortKey)) { 
     return -sortDirection; 
    } 

    if (parseInt(a.sortKey) > parseInt(b.sortKey)) {         
      return sortDirection; 
    } 
} else { 
    //Non numeric sort 
} 

在這裏，你總是試圖排序爲整數，如果a不包含-。一個非常粗略的解決方法是：

if (a.sortKey.indexOf('-') == -1 && (!isNaN(a.sortKey) && !isNaN(a.sortKey))) { 
//Rough Numeracy check       

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

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

} else { 
    //Non numeric sort 
} 

這是一個工作fidle。

請記住，這是一個非常粗略的算術檢查，您可能需要其他數據類型的其他檢查和平衡。