Сортировка строк таблицы по ДВУМ переменным
Я пытаюсь динамически сортировать таблицу с помощью javascript/jQuery. Строки таблицы имеют 2 атрибута:
- крайний срок (временная метка unix)
- статус (1 или 2)
Таблицу нужно отсортировать по статусу (статус 1 сверху, статус 2 снизу), а затем по сроку выполнения (по возрастанию).
Например, правильный порядок примера строк будет следующим:
<table id = "todo_table">
<tbody>
<tr deadline = "1633333333" status = "1"></tr>
<tr deadline = "1644444444" status = "1"></tr>
<tr deadline = "1611111111" status = "2"></tr>
<tr deadline = "1622222222" status = "2"></tr>
</tbody>
</table>
Однако из-за динамического добавления и удаления строк с помощью javascript (или из-за изменения сроков или статусов) я хочу иметь функцию, которая повторно сортирует таблицу после всех этих действий.
Мне удалось написать (скорее найти в Интернете) фрагмент кода, который сортирует таблицу по одному атрибуту:
var $table= $('#todo_table');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('deadline');
var keyB = $(b).attr('deadline');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
console.info(row);
$table.children('tbody').append(row);
});
Однако я не могу понять, как одновременно сортировать по второму атрибуту (сохраняя сортировку по другому атрибуту).
Вот мой фрагмент:
function sort_table(){
var $table= $('#todo_table');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('deadline');
var keyB = $(b).attr('deadline');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "todo_table">
<tbody>
<tr deadline = "1622222222" status = "2"><td>Todo 4</td></tr>
<tr deadline = "1611111111" status = "2"><td>Todo 3</td></tr>
<tr deadline = "1644444444" status = "1"><td>Todo 2</td></tr>
<tr deadline = "1633333333" status = "1"><td>Todo 1</td></tr>
</tbody>
</table>
<button onclick = "sort_table()">SORT</button>Конечным результатом должно быть то, что строки в этом фрагменте отсортированы Задача 1 — Задача 2 — Задача 3 — Задача 4, но сейчас, поскольку сортировка выполняется только в «крайний срок», порядок такой: 3 — 4 — 1 — 2.
Любая помощь будет принята с благодарностью :-)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сортировать по нескольким атрибутам, объединяя условия сортировки. В этом случае вы хотите сначала отсортировать по статусу, а затем по крайнему сроку. Я не уверен, что это лучший способ.
function sort_table(){
var $table= $('#todo_table');
var rows = $table.find('tr').get();
rows.sort(function(a, b) {
var keyA = $(a).attr('status');
var keyB = $(b).attr('status');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
var keyA = $(a).attr('deadline');
var keyB = $(b).attr('deadline');
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "todo_table">
<tbody>
<tr deadline = "1622222222" status = "2"><td>Todo 4</td></tr>
<tr deadline = "1611111111" status = "2"><td>Todo 3</td></tr>
<tr deadline = "1644444444" status = "1"><td>Todo 2</td></tr>
<tr deadline = "1633333333" status = "1"><td>Todo 1</td></tr>
</tbody>
</table>
<button onclick = "sort_table()">SORT</button>Это решение дает тот же результат, что и ответ Гихана , только используя некоторые встроенные функции, такие как JQuery sort и empty, а также localeCompare современных браузеров для сортировки строк, поскольку оно в любом случае возвращает значение, ожидаемое sort:
referenceStr.localeCompare(compareString)возвращается отрицательное число, еслиreferenceStrвстречается передcompareString; положительный, еслиreferenceStrпроисходит послеcompareString; 0, если они эквивалентны.
Пока это работает, я бы рекомендовал использовать атрибуты data-* (например, data-deadline вместо deadline), чтобы убедиться, что вы не конфликтуете ни с одним стандартным HTML-атрибутом.
function sort_table() {
const tableBody = $("#todo_table > tbody");
// Find & sort table rows
const rows = tableBody
.children()
.sort((rowA, rowB) => {
const a = toSortAttributes(rowA);
const b = toSortAttributes(rowB);
const deadlineOrder = a.deadline.localeCompare(b.deadline);
const statusOrder = a.status.localeCompare(b.status);
if (statusOrder === 0) {
return deadlineOrder;
} else {
return statusOrder
}
});
// Remove old rows, replace with sorted ones
tableBody
.empty()
.append(rows);
}
function toSortAttributes(row) {
const deadline = $(row).attr("deadline");
const status = $(row).attr("status");
return { deadline, status };
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "todo_table">
<tbody>
<tr deadline = "1622222222" status = "2"><td>Todo 4</td></tr>
<tr deadline = "1611111111" status = "2"><td>Todo 3</td></tr>
<tr deadline = "1644444444" status = "1"><td>Todo 2</td></tr>
<tr deadline = "1633333333" status = "1"><td>Todo 1</td></tr>
</tbody>
</table>
<button onclick = "sort_table()">SORT</button>