Как отсортировать таблицу по дате?

367
25 апреля 2017, 05:36

Есть таблица (приведена ниже), данные получаются по средствам АПИ и вставляются в таблицу, каждые 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>

Answer 1

function tableSort(table) { 
  $('tbody > tr', table).sort(function(a, b) { 
    return $('td[data-label="Дата вылета"]', a).text() > $('td[data-label="Дата вылета"]', b).text(); 
  }).each(function() { 
    $(this).appendTo(table); 
  }); 
} 
 
$(function() { 
  $('table').each(function() { 
    tableSort('table'); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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-20</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-04-22</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>

READ ALSO
Событие активации анимации

Событие активации анимации

Есть код который активирует анимацию при двойном клике по form1, а нужно чтобы анимация срабатывала при двойном клике по компоненту webBrowser1 и по срабатыванию...

233
Книги по C# и другая литература

Книги по C# и другая литература

Вопросы о литературе по различным языкам программирования возникают очень частоЗдесь мы попробуем собрать лучшие ответы и рекомендации...

806
Создание и заполнение масива

Создание и заполнение масива

Здравствуйте, не могу понять как правильно сделать этоНеобходимо создать масив с элементами

205