Как отсортировать столбец даты в этом формате?

Большинство дат в моей таблице отформатированы в мм/дд/гггг. Однако у меня есть две даты в формате от мм/дд/гггг до мм/дд/гггг. Каков наилучший способ сортировки? Столбец должен сортироваться только по первой дате (с даты).

Заранее спасибо.

Пожалуйста, посмотрите мой тестовый пример здесь -

https://live.datatables.net/zasupaza/1/edit

  
$(document).ready(function() {
   $.fn.dataTable.moment( 'MM/DD/YYYY');

$('#example_full1').DataTable({
     responsive: true,
fixedHeader: true,
order:[[  0, 'desc' ]] 

} );
} );
  
<!DOCTYPE html>
<html>
  <head>
    <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href = "https://nightly.datatables.net/css/jquery.dataTables.css" rel = "stylesheet" type = "text/css" />
    <script src = "https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>


<table id = "example_full1" class = "row-border stripe dataTable no-footer dtr-inline" role = "grid" style = " width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th  >3</th>
<th>4</th>
</tr>

</thead><tbody>
<tr>
  <td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>


  
  <tr>
    <td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
  <tr>
    <td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
    <tr>
      <td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
    
  
   <tr>
     <td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

</tbody></table>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
95
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Поместите скрытый div перед содержимым ячейки (только один, если это ячейка из-в) в формате ГГГГ-ММ-ДД и удалите функцию dataable.moment.

https://live.datatables.net/zasupaza/3/edit

Спасибо. Я смущен. Я не вижу правильной сортировки таблицы по дате.

magicsinger 09.02.2023 20:28

Вы не видите изменений, потому что я начал с вашего примера, который не работает (проверьте консоль). Кстати, возможно, мое решение старое, вам стоит использовать сортировку данных live.datatables.net/dosiliyi/2/edit

voidbrain 09.02.2023 21:06

Спасибо, оба решения сработали. Но я выбрал предварительное форматирование, так как мне не нужно обновлять всю таблицу новыми значениями сортировки. В моей таблице около 100 строк. Еще раз спасибо.

magicsinger 09.02.2023 21:09

Забавно, у меня сегодня была такая же проблема. Для меня сработало добавление атрибута data-sort с отметкой времени на td:

<td data-sort = "{{ collection.getDateCreated().getTimestamp() }}">
    {{ collection.getCreatedAtString() }}
</td>

Это заставит DataTable использовать значение в data-sort, а не значение в тегах. Судя по всему, DataTables называет это ортогональными данными.

Ответ принят как подходящий

Вы можете использовать метод Pre-deformatting для преобразования данных диапазона дат в упорядоченные данные следующим образом:

$(document).ready(function() {
  $.fn.dataTable.ext.type.order['date-range-pre'] = function(date){
  var parts = date.split(" - ");
  return new Date(parts[0]);
};

$('#example_full1').DataTable({
  responsive: true,
  fixedHeader: true,
  order:[[  0, 'desc' ]],
  columnDefs: [
         { 
           targets: 0,
           type: 'date-range'
         }
     ]

} );
  
  
} );
<!DOCTYPE html>
<html>
  <head>
    <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
    <link href = "https://nightly.datatables.net/css/jquery.dataTables.css" rel = "stylesheet" type = "text/css" />
    <script src = "https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>


<table id = "example_full1" class = "row-border stripe dataTable no-footer dtr-inline" role = "grid" style = " width: 100%;"><thead>
<tr>
<th>1</th>
<th >2</th>
<th  >3</th>
<th>4</th>
</tr>

</thead><tbody>
<tr>
  <td>12/16/2007</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>


  
  <tr>
    <td>09/08/2014 - 09/12/2014</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
  <tr>
    <td>08/16/2020</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
    <tr>
      <td>08/16/2021 - 08/19/2021</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
  
    
  
   <tr>
     <td>11/14/2012</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

</tbody></table>
  • определив date-range-pre формат диапазона дат, разделив его, а затем преобразовав первую дату в date тип, который можно сортировать, в дополнение к игнорированию второй даты
  • измените тип этого столбца на date-range внутри columnDefs

Вы можете комбинировать поддержку DataTables для ортогональных данных с некоторым JavaScript для переформатирования строки даты.

В этом случае, поскольку у вас есть mm/dd/yyyy в качестве формата, мы перестроим строку так, чтобы она была yyyy/mm/dd, и тогда мы можем полагаться на естественный порядок сортировки результирующей строки.

Для более длинных строк даты mm/dd/yyyy to mm/dd/yyyy мы можем игнорировать вторую дату.

Ключевым моментом здесь является то, что это переформатирование применяется только к данным, используемым для сортировки. Он не изменяет данные, которые отображаются пользователю или используются для поиска/фильтрации.

$(document).ready(function() {

  var table = $('#example_full1').DataTable({
    columnDefs: [{
      targets: 0,
      render: function(data, type, row, meta) {
        if (type === 'sort') { // ONLY for data used for sorting
          //console.info(data.substring(6, 10) + '/' + data.substring(0, 5));
          return data.substring(6, 10) + '/' + data.substring(0, 5);
        } else {
          return data; // for display and filtering values
        }
      }
    }]
  });

});
<!doctype html>
<html>

<head>
  <meta charset = "UTF-8">
  <title>Demo</title>
  <script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src = "https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
  <link rel = "stylesheet" type = "text/css" href = "https://datatables.net/media/css/site-examples.css">

</head>

<body>

  <div style = "margin: 20px;">

    <table id = "example_full1" class = "row-border stripe dataTable no-footer dtr-inline" role = "grid" style = " width: 100%;">
      <thead>
        <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>

      </thead>
      <tbody>
        <tr>
          <td>12/16/2007</td>
          <td>test1</td>
          <td>5</td>
          <td>16</td>
        </tr>



        <tr>
          <td>09/08/2014 - 09/12/2014</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>

        <tr>
          <td>08/16/2020</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>

        <tr>
          <td>08/16/2021 - 08/19/2021</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>



        <tr>
          <td>11/14/2012</td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
      </tbody>
    </table>

  </div>



</body>

</html>

Другие вопросы по теме