Большинство дат в моей таблице отформатированы в мм/дд/гггг. Однако у меня есть две даты в формате от мм/дд/гггг до мм/дд/гггг. Каков наилучший способ сортировки? Столбец должен сортироваться только по первой дате (с даты).
Заранее спасибо.
Пожалуйста, посмотрите мой тестовый пример здесь -
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>
Поместите скрытый div перед содержимым ячейки (только один, если это ячейка из-в) в формате ГГГГ-ММ-ДД и удалите функцию dataable.moment.
https://live.datatables.net/zasupaza/3/edit
Вы не видите изменений, потому что я начал с вашего примера, который не работает (проверьте консоль). Кстати, возможно, мое решение старое, вам стоит использовать сортировку данных live.datatables.net/dosiliyi/2/edit
Спасибо, оба решения сработали. Но я выбрал предварительное форматирование, так как мне не нужно обновлять всю таблицу новыми значениями сортировки. В моей таблице около 100 строк. Еще раз спасибо.
Забавно, у меня сегодня была такая же проблема. Для меня сработало добавление атрибута 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>
Спасибо. Я смущен. Я не вижу правильной сортировки таблицы по дате.