Функция сортировки таблиц jQuery, сортировка только в одну сторону

Question

Я работаю над книгой jQuery и в настоящее время занимаюсь разделом сортировки таблиц. Используя пример кода из книги, я настроил следующий тестовый сценарий, когда я нажимаю на заголовок столбца, он правильно сортирует данные в одну сторону (по возрастанию), но когда я снова нажимаю на заголовок того же столбца, ничего не происходит (я м, ожидая, что данные будут отсортированы по убыванию при 2-м щелчке).

Кто-нибудь может взглянуть на пример кода ниже и сказать мне, почему это так?

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

Answer 1

Что-то вроде следующего сделает это. Вот Рабочая демоверсия

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

Answer 2

Операторы 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;

Answer 3

Просто отследите, если пользователь снова щелкнет по тому же столбцу, и если, сделайте rows.reverse (); перед вашим $. Каждый цикл

1007 * ех *

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