Сортировать по дате. Как?

Question

[sochi-russia]

Есть таблица (приведена ниже), данные получаются по средствам АПИ и вставляются в таблицу, каждые 20 минут новые данные. Но часто данные получаются в разброс по дате вылета. Как отсортировать по дате вылета данные по средством JS? Спасибо

<table class="table table-hover" style="max-width: 1200px;min-width: 320px;width: 100%;text-align: center;margin: 0px auto;">
    <thead style="background: #eaf9fc;">
      <tr>
        <th style="text-align: center;font-size: 20px;padding: 20px;">Пункт отправления</th>
        <th style="text-align: center;font-size: 20px;padding: 20px;">Пункт назначения</th>
        <th class="mob" style="text-align: center;font-size: 20px;padding: 20px;">Авиакомпания</th> <th style="text-align: center;font-size: 20px;padding: 20px;">Цена, р.</th> <th class="mob" style="text-align: center;font-size: 20px;padding: 20px;">Дата вылета</th>
<th class="mob" style="text-align: center;font-size: 20px;padding: 20px;">Обратная дата</th>
<th> </th>
      </tr>
    </thead>    <tbody style="background: #fff0f54d;">
<tr>
<td data-label="Пункт отправления" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Москва&nbsp;</td>
        <td data-label="Пункт назначения" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Санкт-Петербург&nbsp; </td>

     <td data-label="Авиакомпания" class="mob"><img alt="" src="https://pics.avs.io/180/70/N4.png" width="120" height="50"></td>
<td data-label="Цена, р." style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">3096&nbsp;  RUB &nbsp; </td> 
<td data-label="Дата вылета" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-04-24</td>
<td data-label="Обратная дата" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-04-26</td>
      <td class="poisk" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;"><a class="poiski" style="text-decoration: none;" rel="nofollow" role="button" alt="авиабилеты Москва Санкт-Петербург" title="авиабилеты Москва Санкт-Петербург" href="/#">Поиск</a></td></tr>
<tr>
<td data-label="Пункт отправления" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Москва&nbsp;</td>
        <td data-label="Пункт назначения" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Санкт-Петербург&nbsp; </td>

     <td data-label="Авиакомпания" class="mob"><img alt="" src="https://pics.avs.io/180/70/FV.png" width="120" height="50"></td>
<td data-label="Цена, р." style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">6323&nbsp;  RUB &nbsp; </td> 
<td data-label="Дата вылета" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-04-24</td>
<td data-label="Обратная дата" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-07-26</td>
      <td class="poisk" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;"><a class="poiski" style="text-decoration: none;" rel="nofollow" role="button" alt="авиабилеты Москва Санкт-Петербург" title="авиабилеты Москва Санкт-Петербург" href="/#">Поиск</a></td></tr>
<tr>
<td data-label="Пункт отправления" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Москва&nbsp;</td>
        <td data-label="Пункт назначения" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">&nbsp; Санкт-Петербург&nbsp; </td>

     <td data-label="Авиакомпания" class="mob"><img alt="" src="https://pics.avs.io/180/70/D2.png" width="120" height="50"></td>
<td data-label="Цена, р." style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">11685&nbsp;  RUB &nbsp; </td> 
<td data-label="Дата вылета" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-08-15</td>
<td data-label="Обратная дата" class="mob" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;">2017-09-26</td>
      <td class="poisk" style="font-size: 1.8rem;font-family: Open Sans;font-weight: 400;"><a class="poiski" style="text-decoration: none;" rel="nofollow" role="button" alt="авиабилеты Москва Санкт-Петербург" title="авиабилеты Москва Санкт-Петербург" href="/#">Поиск</a></td></tr>
  </tbody>
  </table>

Comments

[Алексей Струков]

Данные приходят в json?
Пример нужен двух-трех записей
Отсортировать скорее всего получится парой строчек кода

Answer 1

[archelon]

подключите готовый js-плагин, например tablesorter

Comments

[sochi-russia]

Пробовал, не работает данный способ, на сайте подключен jquery_form.js jquery-ui.min.js jquery.min.js
видимо конфликт и так сайт не быстро открывается а будет еще медленней, поэтому рассматриваю JS

[archelon]

возможно, версия jquery не подходит.
можно найти вариант без jq.
вот первое, что попалось: https://github.com/tristen/tablesort

[sochi-russia]

archelon: Там предлагают еще 7 скриптов установить.

<script src='spec/tablesort.js'></script>
<script src='spec/dotsep.js'></script>
<script src='spec/multibody.js'></script>
<script src='spec/filesize.js'></script>
<script src='spec/date.js'></script>
<script src='spec/number.js'></script>
<script src='spec/monthname.js'></script>

[archelon]

sochi-russia: это, как я понял, сделано как раз для возможности уменьшения общего веса скрипта.
подключайте только те сортировки, что нужны. можно объединить в один файл. общий вес - совсем небольшой.

[sochi-russia]

archelon: Попробую спасибо. Как результат будет закрою ответ. С уважением.