英文:
How do I sort date column with this format?
问题
表格中的大多数日期都以mm/dd/yyyy的格式呈现。然而，我有两个日期是以mm/dd/yyyy to mm/dd/yyyy的格式呈现的。最好的排序方式是什么？列应该只按第一个日期（起始日期）进行排序。
提前致谢。
请在此处查看我的测试用例 -
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>
</body>
</html>
如果您有其他问题，请随时提出。
英文:
Most dates in my table are formatted in mm/dd/yyyy. However, I have two dates that are in mm/dd/yyyy to mm/dd/yyyy format. What is the best way to sort it? The column should only sort on the first date (from date).
Thanks in advance.
Please see my test case here -
https://live.datatables.net/zasupaza/1/edit
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
$.fn.dataTable.moment( 'MM/DD/YYYY');
$('#example_full1').DataTable({
responsive: true,
fixedHeader: true,
order:[[ 0, 'desc' ]]
} );
} );
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 2
你可以使用预格式化方法将日期范围数据转换为可排序的数据，如下所示：
$(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'
}
]
});
});
通过定义 date-range-pre，它将按照指定格式拆分日期范围，然后将第一个日期转换为可排序的日期类型，并忽略第二个日期。
在 columnDefs 中将此列的类型更改为 date-range。
英文:
You can use Pre-deformatting method to convert the date range data into orderable data as the following:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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'
}
]
} );
} );
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
-
by defining
date-range-prewhich format you date range by splitting it then convert first date intodatetype which is sortable type in addition to ignoring second date -
change type of this column to
date-rangeinsidecolumnDefs
答案2
得分: 1
在您的单元格内容之前放置一个隐藏的div（如果是一个从-到单元格，则只放一个）YYYY-MM-DD格式，并删除datable.moment函数。
https://live.datatables.net/zasupaza/3/edit
英文:
Put an hidden div before your cell content (just one if it's a from-to cell) YYYY-MM-DD format and remove the datable.moment function.
答案3
得分: 1
有趣，今天我遇到了同样的问题。对我来说，将时间戳放在td的data-sort属性中起作用：
<td data-sort="{{ collection.getDateCreated().getTimestamp() }}">
{{ collection.getCreatedAtString() }}
</td>
这将使数据表使用data-sort中的值，而不是标签中的值。显然，DataTables 将其称为正交数据。
英文:
Funny, I had the same problem today. For me, it worked to put a data-sort attribute with the timestamp on the td:
<td data-sort="{{ collection.getDateCreated().getTimestamp() }}">
{{ collection.getCreatedAtString() }}
</td>
This will make DataTable to use the value in data-sort rather than the value in the tags. Apparently, DataTables calls this orthogonal data.
答案4
得分: 1
以下是翻译好的部分：
您可以将DataTables对orthogonal data的支持与一些JavaScript结合起来重新格式化您的日期字符串。
在这种情况下，因为您的格式是mm/dd/yyyy，我们将重新排列字符串为yyyy/mm/dd，然后我们可以依赖生成的字符串的自然排序顺序。
对于您较长的日期字符串mm/dd/yyyy至mm/dd/yyyy，我们可以忽略第二个日期。
关键点在于：这种重新格式化仅适用于用于排序的数据，不会更改显示给用户的数据或用于搜索/过滤的数据。
$(document).ready(function() {
var table = $('#example_full1').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, row, meta) {
if (type === 'sort') { // 仅用于排序的数据
//console.log(data.substring(6, 10) + '/' + data.substring(0, 5));
return data.substring(6, 10) + '/' + data.substring(0, 5);
} else {
return data; // 用于显示和过滤值
}
}
}]
});
});
<!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>
英文:
You can combine DataTables' support for orthogonal data with some JavaScript to reformat your date string.
In this case, because you have mm/dd/yyyy as your format, we will re-arrange the string to be yyyy/mm/dd - and then we can rely on the natural sort order of the resulting string.
For your longer date strings mm/dd/yyyy to mm/dd/yyyy, we can ignore the second date.
The key point here is: This re-formatting only applies to the data used for sorting. It does not change the data which is displayed to the user, or which is used for searching/filtering.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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.log(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
}
}
}]
});
});
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论