jQuery表排序函数只对单向排序

时间:2009-09-15 20:58:43

标签: jquery html

我正在编写一本jQuery书,目前正在进行表格排序。使用本书中的示例代码,我设置了以下测试场景,当我单击列标题时,它正确地对数据进行单向排序(升序),但是当我再次点击同一列标题时,没有任何反应(我' m期望数据在第二次点击时降序排列)。

有人可以查看下面的示例代码并告诉我为什么会这样吗?

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);
                        });
                    });
             }
        });
    });
});

3 个答案:

答案 0 :(得分:2)

以下内容会做到这一点。这是一个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);
                        });
                    });
             }
        });
    });
});

答案 1 :(得分:0)

只需跟踪用户是否再次点击同一列,然后在 $。每个循环

之前执行 rows.reverse();

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

答案 2 :(得分:0)

sort函数中的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;