只有單向排序的jQuery表排序函數

我正在通過一本jQuery書，目前正在表排序的章節。使用本書中的示例代碼，我已經設置了以下測試場景，當我單擊列標題時，它正確地按照一種方式（升序）對數據進行排序，但是當我再次單擊同一列標題時，預計數據將在第二次點擊降序排序）。只有單向排序的jQuery表排序函數

有人可以看看下面的示例代碼，並告訴我爲什麼這是？

HTML：

<table class="sortable"> 
<thead> 
    <tr> 
    <th class="sort-alpha"><strong>Flat number</strong></th> 
    <th class="sort-alpha"><strong>Tenant name</strong></th> 
    </tr> 
</thead> 
    <tbody> 
    <tr> 
    <td>83</td> 
    <td>Rachel Prouse</td> 
    </tr> 
    <tr> 
    <td>79</td> 
    <td>Natalie Charles</td> 
    </tr> 
    </tbody> 
</table>

jQuery的：如果用戶再次，如果單擊同一列

$(document).ready(function() { 

    $('table.sortable').each(function() { 

     var $table = $(this); 
     $('th', $table).each(function(column) { 
      var $header = $(this); 
      if ($header.is('.sort-alpha')) { 

       $header 
        .addClass('clickable') 
        .hover(
         function() { $header.addClass('hover') }, 
         function() { $header.removeClass('hover'); 
         }) 
        .click(function() { 
         var rows = $table.find('tbody > tr').get(); 
         rows.sort(function(a, b) { 
          var keyA = $(a).children('td').eq(column).text().toUpperCase(); 
          var keyB = $(b).children('td').eq(column).text().toUpperCase(); 
          if (keyA < keyB) return -1; 
          if (keyA > keyB) return 1; 
          return 0; 
         }); 

         $.each(rows, function(index, row) { 
          $table.children('tbody').append(row); 
         }); 
        }); 
      } 
     }); 
    }); 
});

來源

2009-09-15 cw84

像下面這樣做就可以了。這裏是一個Working Demo

$(function() { 

    $('table.sortable').each(function() { 

     var $table = $(this); 
     $('th', $table).each(function(column) { 
      var $header = $(this); 
      if ($header.hasClass('sort-alpha')) { 

       $header 
        .addClass('clickable') 
        .hover(
         function() { $header.addClass('hover') }, 
         function() { $header.removeClass('hover'); 
         }) 
        .click(function() { 
         $header.hasClass('asc')? 
          $header.removeClass('asc').addClass('desc'): 
          $header.removeClass('desc').addClass('asc'); 
         var rows = $table.find('tbody > tr').get(); 

         rows.sort(function(a, b) { 
          var keyA = $(a).children('td').eq(column).text().toUpperCase(); 
          var keyB = $(b).children('td').eq(column).text().toUpperCase(); 

          if (keyA > keyB) { 
           return ($header.hasClass('asc')) ? 1 : -1; 
           } 
          if (keyA < keyB) { 
           return ($header.hasClass('asc')) ? -1 : 1; 
          } 
          return 0;      
         }); 

         $.each(rows, function(index, row) { 
          $table.find('tbody').append(row); 
         }); 
        }); 
      } 
     }); 
    }); 
});

來源

2009-09-15 21:42:34

你可能想把排序方向類放在表上而不是標題，因爲它適用於表。 – 2009-09-16 13:09:20

如果由於hasClass（'sort-alpha'）方法的參數導致JQuery版本> 1.3.2，則這不起作用;它應該是'hasClass（'sort-alpha'）'。 – deedee 2012-12-04 23:25:01

@deedee很對，這是一個錯字:) – 2012-12-05 16:19:01

只是跟蹤，做一個rows.reverse（）;您$。每個環

前

if ($(this).hasClass('desc')) 
{ 
    rows.reverse(); 
    $(this).removeClass('desc'); 
} 
else 
{ 
    $(this).addClass('desc'); 
}

來源

2009-09-15 21:08:55 walming

在您的排序功能控制排序順序return語句之前。也就是說，您需要跟蹤列級別的升序或降序，然後相應地更改它們。例如...

var asc = true; 

if(asc) { //Ascending 
    if (keyA < keyB) return -1; 
    if (keyA > keyB) return 1; 
} 
else { //Descending 
    if (keyA < keyB) return 1; 
    if (keyA > keyB) return -1; 
} 
return 0;

來源

2009-09-15 21:22:10

只有單向排序的jQuery表排序函數

回答

相關問題