Javascript/Thymeleaf表按日期/时间按dd:MM:ss格式排序
Javascript/Thymeleaf表按日期/时间按dd:MM:ss格式排序
提问于 2018-11-29 07:28:16
我正在处理一个显示日期的桌子。
总的来说，我对javascript相当陌生，我很难修改我正在使用的JS，以便使这个排序函数正确工作。目前，它没有正确地比较日期。对于这段代码，我遵循了W3的示例，但我不知道如何正确地调整它以获得正确的日期比较。
HTML：
值得注意的是，我已经为我的问题制作了这个表，但是在我的实时版本中，该表使用的是ThymeLeaf，并且具有动态日期，而不是硬编码日期。
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th onclick="sortTable(0)">Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>OLR</td>
<td>12-11-2018 03:11:14</td>
<td>SUBMITTED</td>
</tr>
<tr>
<td>AF</td>
<td>12-11-2018 03:11:12</td>
<td>SUBMITTED</td>
</tr>
<tr>
<td>SAF</td>
<td>12-11-2018 02:11:27</td>
<td>COLLECTION_COMPLETE</td>
</tr>
<tr>
<td>CTT</td>
<td>15-11-2018 11:11:13</td>
<td>UNSUBMITTED</td>
</tr>
<tr>
<td>WP</td>
<td>19-11-2018 02:11:36</td>
<td>SUBMITTED</td>
</tr>
</tbody>
联合来文：
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}到目前为止，我已经在这方面工作了大约8个小时，我真的很努力。我试图先将元素转换为日期，然后再进行比较，但一直未能使其正常工作。
任何帮助都是非常感谢的。
在完成了下面的帮助之后，但是当我单击标题对我的表进行排序时，很多内容就消失了。
我的新排序表功能：
function sortTable() {
const dates = [...document
.getElementById('myTable')
.querySelectorAll('td')
]
.filter(x => x.textContent.match(/\d{2}\-\d{2}\-\d{2}/))
.map(x => {
const [d, t] = x.textContent.trim().split(' ');
const [day, month, yr] = d.split('-').map(Number);
const [hr, min, sec] = t.split(':').map(Number);
return new Date(yr, month - 1, day, hr, min, sec);
});
const sorted = dates.sort((a, b) => {
if (a > b) return 1;
if (b > a) return -1;
return 0;
});
const html = '<tr><id="timestamp">Last Updated</td></tr>' + sorted
.map(date => {
const yr = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hr = date.getHours();
const min = date.getMinutes();
const sec = date.getSeconds();
const dateString = `${day}-${month}-${yr} ${hr}:${min}:${sec}`;
return `<tr><td>${dateString}</td></tr>`;
})
.join('');
document.getElementById('myTable').innerHTML = html;}
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-11-29 08:44:27
jQuery有一个插件，叫做DataTables，它可以实现这一点，还有很多其他的事情。你为什么要发明自己的自行车？
要获得非常基本的特性集(包括排序)，只需执行DataTables首页建议的操作:指向标题中的jQuery、DataTables及其样式表。
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>或者，您可以使用本地副本的这些。
然后，你只需打电话
$(document).ready( function () {
$('#myTable').DataTable();
} );让DataTables来处理剩下的http://jsfiddle.net/1fvkp6L0/14/
Stack Overflow用户
发布于 2018-11-29 07:44:36
首先是获取实际可以排序的表单中的日期列表，即数组：
const dates = [...document
.getElementById('id-of-the-table')
.querySelectorAll('td')
]
.filter(x => x.textContent.match(/\d{2}\-\d{2}\-\d{2}/))
.map(x => {
const [d, t] = x.textContent.trim().split(' ');
const [day, month, yr] = d.split('-').map(Number);
const [hr, min, sec] = t.split(':').map(Number);
return new Date(yr, month - 1, day, hr, min, sec);
});现在，我们可以根据日期值对它们进行排序：
const sorted = dates.sort((a, b) => {
if (a > b) return 1;
if (b > a) return -1;
return 0;
});若要切换降/升，只需反转条件。然后使用排序的值重新生成表：
const html = sorted
.map(date => {
const yr = date.getFullYear();
const month = date.getMonth() + 1;
// etc. etc.
const datestring = `${day}-${month}-${yr} ${hr}:${min}:${sec}`;
return `<tr><td>${datestring}</td></tr>`;
})
.join('');
document.getElementById('id-for-table').innerHTML = html;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53542374
复制相关文章
相似问题
腾讯云开发者
