jQuery Сортировка по убыванию

Question

При щелчке, я пытаюсь сортировать этот класс в порядке возрастания, а затем вернуться в порядке убывания. Когда я нажимаю «И», Сорт отлично работает в порядке возрастания, но не работает для нисходящего. Пожалуйста, помогите мне сделать эту работу. Я думаю, что это имеет какое-то отношение к моему выражению else, потому что оператор if работает нормально. :)

$(".id").click(function(){ 
    var mylist = $('.sort'); 
    var listitems = mylist.children('tr').get(); 
    listitems.sort(function(a, b) { 
    var compA = $(a).text().toUpperCase(); 
    var compB = $(b).text().toUpperCase(); 
    if ((compA < compB) ? -1 : (compA > compB) ? 1 : 0){ 
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
    } else { 
     return (compB < compA) ? 1:(compB > compB)? 1 : 0; 
    } 
    }); 
    $.each(listitems, function(idx, itm) { mylist.append(itm); }); 
}); 

Answer 1

Вам нужно переключить информацию о направление сортировки по нажатой кнопке или ссылке,
Например. Хранить направление сортировки внутри атрибута данных, как data-sort-direction, который принимает значения asc и desc или 0 для восходящего рода и 1 для нисходящех типа сортировки.

Итак, нажмите вы извлекаете это значение атрибута и вы сортировать элементы в соответствии с текущим значением asc или desc, 0 или 1, а затем использовать его в .sort() метод, чтобы решить, нужно ли вернуться 1, -1 или 0

if (an > bn) { 
    return sortDirection === "asc" ? 1 : -1; 
} 
if (an < bn) { 
    return sortDirection ==="asc" ? -1 : 1; 
} 
return 0; 

HTML

<button class="id" data-sort-direction="asc">Sort</button> 
<table id="sort" class="table"> 
    <tr data-name="John Doe"> 
     <td>Mr. John Doe</td> 
    </tr> 
    <tr data-name="Trent Richardson"> 
     <td>Mr. Trent Richardson</td> 
    </tr> 
    <tr data-name="Cindy Smith"> 
     <td>Ms. Cindy Smith</td> 
    </tr> 
    <tr data-name="Bill Williams"> 
     <td>Mr. Bill Williams</td> 
    </tr> 
    <tr data-name="Jane Doe"> 
     <td>Mrs. Jane Doe</td> 
    </tr> 
</table> 

JS

var mylist = $('#sort'), 
    listitems = mylist.children('tbody').children('tr'); 
$('.id').on('click', function (e) { 
    var button = $(this),sortDirection = button.data('sort-direction'); 
    // update data attribute for the next click 
    sortDirection === "asc"?button.data('sort-direction', "desc"):button.data('sort-direction', "asc"); 
    listitems.sort(function (a, b) { 
     var an = a.getAttribute('data-name'), 
      bn = b.getAttribute('data-name'); 
     if (an > bn) { 
      return sortDirection === "asc"?1:-1; 
     } 
     if (an < bn) { 
      return sortDirection ==="asc"?-1:1; 
     } 
     return 0; 
    }); 

    listitems.detach().appendTo(mylist); 
}); 

Будьте осторожны при извлечении <tr> элементов из <table> тега, есть неявное <tbody>, даже если опустить его в HTML, так что вы должны получить <tr> вещи таким образом:

listitems = mylist.children('tbody').children('tr'); 

Fiddle with <tr>

Fiddle with <div>

Answer 2

Измените функцию сортировки для этого:

listitems.sort(function (a, b) { 
    var compA = $(a).text().toUpperCase(); 
    var compB = $(b).text().toUpperCase(); 
    if(compA < compB) { 
     return -1; 
    } else if(compA > compB) { 
     return 1; 
    } else { 
     return 0; 
    } 
}); 

Вы также можете использовать встроенный в Array метод отсортировать массив:

var sortedArr = Array.prototype.sort(listitems);