Сортировка даты и времени с помощью jQuery в таблице

Question

У меня есть таблица с датой и временем и другими текстами. Я хочу сортировать таблицу в порядке убывания даты и времени. Я пробовал различный метод, который некоторые смотрят только на дату, но я хочу, чтобы и дата, и время заказывались.

Спасибо!

Это код, который я получил из Интернета и попытался, но он не выходит так, как я хотел.
Fiddle есть все: Fiddle

var john = $.makeArray($(".foobar")); 
john.sort(function(a, b) { 
    return new Date($(a).text()) < new Date($(b).text()); 
    }); 
$("#alice tr").html(john); 

Answer 1

Хорошо несколько вещей, которые я заметил

• Забыла загрузить JQuery в jsfiddle
• Вы разбирали клетки вместо строк, вы хотите, чтобы отсортировать строки
• позволяет использовать дату в числовом строке (если вы не хотите использовать JS, чтобы преобразовать его, а)
• Всегда хранить данные вы манипулируете данными atttributes (как в HTML5), это делает его более эффективным и легким в управлении
• По убыванию в этой ситуации будет bDate - aDate, а не aDate - bDate (если вы хотите предложить как в функции , конечно, вы можете сделать простой условный для этого)

Вот разветвленная и обновленная информация d jsdfiddle: https://jsfiddle.net/GioLogist/ujtyzu09/

var john = $.makeArray($(".foobar")); 
 
john.sort(function(a, b) { 
 

 
    var aDate = new Date($(a).data('date')); 
 
    var bDate = new Date($(b).data('date')); 
 
    return (bDate) - (aDate); 
 
    
 
}); 
 
$("#alice").html(john);

table { 
 
    border-collapse: collapse; 
 
} 
 

 
table tr td { 
 
    padding: 4px; 
 
} 
 

 
table tr td:nth-child(2) { 
 
    width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
     <th>pro</th> 
 
     <th>date</th> 
 
     <th>notes</th> 
 
    </thead> 
 
    <tbody id="alice"> 
 
     <tr class="foobar" data-date="2016-05-23 03:10"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="statuschange">icon</span> 23 may, 03:10 
 
      </td> 
 
      <td>Dolor sit amet, consectetur adipisicing elit. Quae ut consequatur, facere quaerat Est.</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-09-22 03:10"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="comment">icon</span> 22 sep, 03:10 
 
      </td> 
 
      <td>Nemo consectetur saepe possimus, dolor vero excepturi voluptas! </td> 
 
      <td></td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-05-28 11:19"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="request">icon</span> 28 may, 11:19 
 
      </td> 
 
      <td>Iure, nam cum perspiciatis, doloribus</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-07-16 17:05"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="notes">icon</span> 16 jul, 17:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td>updated date</td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-07-16 21:05"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="notes">icon</span> 16 jul, 21:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-12-12 21:05"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="notes">icon</span> 12 dec, 21:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr class="foobar" data-date="2016-6-10 21:05"> 
 
      <td>img</td> 
 
      <td> 
 
       <span class="notes">icon</span> 10 june, 21:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Добавлено несколько дополнительных строк кстати, как раз в то время как я был тестирование.

Answer 2

У вас есть несколько вопросов в вашей сортировочной логике, например, тот факт, что вы сортировкой .foobar элементов, а не их родительских tr. Однако основная проблема заключается в том, что формат даты в вашем HTML не может быть проанализирован объектом Date().

Самый простой способ исправить это можно было бы добавить атрибут data на каждом .foobar элемент, который держит оформленной строку даты, которую можно использовать в сортировочный логике, как это:

$('tbody tr').sort(function(a, b) { 
 
    var aDate = new Date($(a).find('.foobar').data('date')); 
 
    var bDate = new Date($(b).find('.foobar').data('date')); 
 
    return aDate < bDate ? -1 : aDate > bDate ? 1 : 0; 
 
}).appendTo('tbody');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
    <thead> 
 
     <th>pro</th> 
 
     <th>date</th> 
 
     <th>notes</th> 
 
    </thead> 
 
    <tbody id="alice"> 
 
     <tr> 
 
      <td>img</td> 
 
      <td class="foobar" data-date="2016-05-23 03:10"> 
 
       <span class="statuschange">icon</span> 23 may, 03:10 
 
      </td> 
 
      <td>Dolor sit amet, consectetur adipisicing elit. Quae ut consequatur, facere quaerat Est.</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td>img</td> 
 
      <td class="foobar" data-date="2016-09-22 03:10"> 
 
       <span class="comment">icon</span> 22 sep, 03:10 
 
      </td> 
 
      <td>Nemo consectetur saepe possimus, dolor vero excepturi voluptas! </td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td>img</td> 
 
      <td class="foobar" data-date="2016-05-28 11:19"> 
 
       <span class="request">icon</span> 28 may, 11:19 
 
      </td> 
 
      <td>Iure, nam cum perspiciatis, doloribus</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <td>img</td> 
 
      <td class="foobar" data-date="2016-07-16 17:05"> 
 
       <span class="notes">icon</span> 16 jul, 17:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td>updated date</td> 
 
     </tr> 
 
     <tr> 
 
      <td>img</td> 
 
      <td class="foobar" data-date="2016-07-16 21:05"> 
 
       <span class="notes">icon</span> 16 jul, 21:05 
 
      </td> 
 
      <td>Consectetur adipisicing elit. Tempora quam assumenda ab.</td> 
 
      <td></td> 
 
     </tr> 
 
    </tbody> 
 
</table>