Я работаю над таблицей, в которой отображаются даты
[! [введите описание изображения здесь] [1]] [1]
Я новичок в 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>
JS:
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;
}
Там плагин для 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/
Сначала получается список дат в форме, которую мы можем сортировать, т.е. Массив:
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;
<tr><td>${dateString}</td></tr>
Остальная часть моей таблицы удаляется, когда я нажимаю на заголовок, показывая только строки с датами и ничего больше. Нужно ли мне теперь возвращать всю таблицу снова?
const html = '<tr><td>Last Updated</td></tr>' + sorted.map...