Сортировка таблицы по дате с использованием Jquery - PullRequest
Новая
       18

Сортировка таблицы по дате с использованием Jquery

0 голосов
/ 27 июня 2018

Я пытаюсь отсортировать массив при клике по дате / месяцу / году (возрастанию и убыванию) с помощью Jquery. Однако при нажатии на кнопку «Дата» таблица сортируется неправильно.

Вот мой сценарий: https://jsfiddle.net/mr8vnj57/9/

var compare = {                           // Declare compare object
  name: function(a, b) {                  // Add a method called name
    a = a.rep
    lace(/^the /i, '');          // Remove The from start of parameter
    b = b.replace(/^the /i, '');          // Remove The from start of parameter

    if (a < b) {                          // If value a is less than value b
      return -1;                          // Return -1
    } else {                              // Otherwise
      return a > b ? 1 : 0;               // If a is greater than b return 1 OR
    }                                     // if they are the same return 0
  },
  duration: function(a, b) {              // Add a method called duration
    a = a.split(':');                     // Split the time at the colon
    b = b.split(':');                     // Split the time at the colon

    a = Number(a[0]) * 60 + Number(a[1]); // Convert the time to seconds
    b = Number(b[0]) * 60 + Number(b[1]); // Convert the time to seconds

    return a - b;                         // Return a minus b
  },
  date: function(a, b) {                  // Add a method called date
    a = new Date(a);                      // New Date object to hold the date
    b = new Date(b);                      // New Date object to hold the date

    return a - b;                         // Return a minus b
  }
};

$('.sortable').each(function() {
  var $table = $(this);                     // This sortable table
  var $tbody = $table.find('tbody');        // Store table body
  var $controls = $table.find('th');        // Store table headers
  var rows = $tbody.find('tr').toArray();   // Store array containing rows

  $controls.on('click', function() {        // When user clicks on a header
    var $header = $(this);                  // Get the header
    var order = $header.data('sort');       // Get value of data-sort attribute
    var column;                             // Declare variable called column

    // If selected item has ascending or descending class, reverse contents
    if ($header.is('.ascending') || $header.is('.descending')) {  
      $header.toggleClass('ascending descending');    // Toggle to other class
      $tbody.append(rows.reverse());                // Reverse the array
    } else {                                        // Otherwise perform a sort                            
      $header.addClass('ascending');                // Add class to header
      // Remove asc or desc from all other headers
      $header.siblings().removeClass('ascending descending'); 
      if (compare.hasOwnProperty(order)) {  // If compare object has method
        column = $controls.index(this);         // Search for column’s index no

        rows.sort(function(a, b) {               // Call sort() on rows array
          a = $(a).find('td').eq(column).text(); // Get text of column in row a
          b = $(b).find('td').eq(column).text(); // Get text of column in row b
          return compare[order](a, b);           // Call compare method
        });

        $tbody.append(rows);
      }
    }
  });
});
td {
	background-color: #fff;}
table.sortable th:hover {
	cursor: pointer;}
th.ascending, th.descending, table.sortable th:hover {
	background-color: #00cccc;
	color: #fff;}

/* Arrows for table sorting */
th.ascending:after {
	font-size: 60%;
    content: '\25B2';
    float: left;
	padding: 4px 5px 0px 0px;}
th.descending:after {
	font-size: 60%;
    content: '\25BC';
    float: left;
	padding: 4px 5px 0px 0px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sortable">
      <thead>
        <tr>
          <th >Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>16-07-2014</td>
        </tr>
        <tr>
          <td>28-02-2014</td>
        </tr>
        <tr>
          <td>10-04-2012</td>
        </tr>
        
         <tr>
          <td>10-04-2016</td>
        </tr>
 
      </tbody>
    </table>

Это говорит мне

Дата уменьшается: 10-04-2016 10.04.2012 28-02-2014 16-07-2014

Увеличение даты: 16-07-2014 28-02-2014 10.04.2012 10-04-2016

У вас есть другое решение или вы можете исправить мне сценарий.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 28 июня 2018

Есть две проблемы:

  • Код ищет в ячейке заголовка атрибут data-sort. Ничего не найдено, поэтому сортировка не использует функцию даты, как ожидалось.
  • Формат даты: «ДД-ММ-ГГГГ». Для использования new Date() требуется формат, распознаваемый методом Date.parse() ( метки времени RFC 2822, совместимые с IETF , а также версия ISO8601 ; скопированная из параметра MDN dateString ). Я решил использовать формат new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);.

== Обновленная демоверсия ==

Чтобы устранить вышеуказанные проблемы, добавьте атрибут data-sort: 

<th data-sort="date">Date</th>

И измените функцию compare.date следующим образом: 

date: function(a, b) {                  // Add a method called date
  a = a.split('-');
  b = b.split('-');
  a = new Date(a[2], a[1] - 1, a[0]);   // New Date object to hold the date
  b = new Date(b[2], b[1] - 1, b[0]);   // New Date object to hold the date
  return a - b;                         // Return a minus b
}
...