只有单向排序的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表排序函数

回答

相关问题