HTML таблица с возможностью сортировки с сортированным по-умолчанию первым столбцом
Для реализации HTML-таблицы, в которой первый столбец отсортирован по-умолчанию, нужно просто вызвать функцию сортировки сразу после загрузки страницы. Включим сортировку по первому столбцу (индекс 0) при загрузке:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
cursor: pointer;
background-color: #f2f2f2;
}
th:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<table id="sortableTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
<th onclick="sortTable(2)">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>28</td>
<td>USA</td>
</tr>
<tr>
<td>Anna Smith</td>
<td>24</td>
<td>UK</td>
</tr>
<tr>
<td>Peter Jones</td>
<td>35</td>
<td>Canada</td>
</tr>
<tr>
<td>Linda Swift</td>
<td>30</td>
<td>Australia</td>
</tr>
</tbody>
</table>
<script>
function sortTable(columnIndex) {
const table = document.getElementById("sortableTable");
const rows = Array.from(table.rows).slice(1);
const isNumeric = !isNaN(rows[0].cells[columnIndex].innerText);
const isAscending = table.querySelectorAll('th')[columnIndex].classList.toggle('ascending');
rows.sort((a, b) => {
let cellA = a.cells[columnIndex].innerText;
let cellB = b.cells[columnIndex].innerText;
if (isNumeric) {
cellA = parseFloat(cellA);
cellB = parseFloat(cellB);
}
if (cellA > cellB) return isAscending ? 1 : -1;
if (cellA < cellB) return isAscending ? -1 : 1;
return 0;
});
for (const row of rows) {
table.tBodies[0].appendChild(row);
}
}
// Сортировка по первому столбцу при загрузке страницы
document.addEventListener("DOMContentLoaded", function() {
sortTable(0);
});
</script>
</body>
</html>
Объяснение:
- DOMContentLoaded: Используем событие
DOMContentLoadedдля вызова функцииsortTable(0)при загрузке страницы. Это обеспечивает сортировку первого столбца («Name») сразу после отображения таблицы на экране. - Стилизация: Аналогично предыдущему примеру, столбцы остаются кликабельными для изменения порядка сортировки.
Этот подход добавляет автоматическую сортировку, сохраняя возможность динамически изменять порядок столбцов по щелчку на заголовках.