Удобная сортировка данных на сайте: 5 способов реализации для таблиц

<table id="sortableTable">
<thead>
<tr>
<th data-sort="text" class="sortable">Название</th>
<th data-sort="number" class="sortable">Цена</th>
<th data-sort="date" class="sortable">Дата добавления</th>
</tr>
</thead>
<tbody>
<tr>
<td>Продукт Z</td>
<td>150</td>
<td>2023-05-15</td>
</tr>
<tr>
<td>Продукт A</td>
<td>250</td>
<td>2023-01-20</td>
</tr>
<!-- Другие строки таблицы -->
</tbody>
</table>

document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('sortableTable');
const headers = table.querySelectorAll('th.sortable');

headers.forEach(header => {
header.addEventListener('click', function() {
const sortType = this.getAttribute('data-sort');
const columnIndex = Array.from(this.parentNode.children).indexOf(this);

sortTableByColumn(table, columnIndex, sortType);
});
});

function sortTableByColumn(table, columnIndex, sortType) {
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));

// Направление сортировки (по возрастанию или убыванию)
const direction = table.getAttribute('data-sort-direction') === 'asc' ? 'desc' : 'asc';

// Сортировка строк
const sortedRows = rows.sort((a, b) => {
const cellA = a.querySelectorAll('td')[columnIndex].textContent.trim();
const cellB = b.querySelectorAll('td')[columnIndex].textContent.trim();

if (sortType === 'number') {
return direction === 'asc' 
? parseFloat(cellA) – parseFloat(cellB)
: parseFloat(cellB) – parseFloat(cellA);
} else if (sortType === 'date') {
return direction === 'asc' 
? new Date(cellA) – new Date(cellB)
: new Date(cellB) – new Date(cellA);
} else {
return direction === 'asc'
? cellA.localeCompare(cellB)
: cellB.localeCompare(cellA);
}
});

// Удаляем старые строки
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}

// Добавляем отсортированные строки
tbody.append(...sortedRows);

// Обновляем направление сортировки
table.setAttribute('data-sort-direction', direction);
}
});

th.sortable {
cursor: pointer;
position: relative;
padding-right: 18px;
}

th.sortable:after {
content: ' ↕';
position: absolute;
right: 5px;
color: #999;
}

table[data-sort-direction="asc"] th.sortable:after {
content: ' ↑';
}

table[data-sort-direction="desc"] th.sortable:after {
content: ' ↓';
}

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<table id="dataTable" class="display" style="width:100%">
<thead>
<tr>
<th>Название</th>
<th>Категория</th>
<th>Цена</th>
<th>Рейтинг</th>
<th>Дата добавления</th>
</tr>
</thead>
<tbody>
<tr>
<td>Смартфон Pro X</td>
<td>Электроника</td>
<td>59990</td>
<td>4.7</td>
<td>2023-06-12</td>
</tr>
<!-- Другие строки -->
</tbody>
</table>

$(document).ready(function() {
$('#dataTable').DataTable({
"order": [[0, "asc"]], // Начальная сортировка по первому столбцу (по возрастанию)
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/ru.json" // Локализация для русскоязычных пользователей
},
"columnDefs": [
{ "type": "num", "targets": 2 }, // Указываем, что третий столбец содержит числа
{ "type": "date", "targets": 4 }, // Пятый столбец содержит даты
{ "orderable": false, "targets": [1] } // Отключаем сортировку для второго столбца
],
"pageLength": 25, // Количество строк на страницу
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Все"]], // Варианты количества строк
"stateSave": true, // Сохранение состояния таблицы между перезагрузками страницы
"responsive": true // Адаптивный дизайн для мобильных устройств
});
});

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- Bootstrap Table CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap Table JS -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>

<table 
id="table"
data-toggle="table"
data-sortable="true"
data-search="true"
data-pagination="true"
data-show-columns="true">
<thead>
<tr>
<th data-sortable="true">ID</th>
<th data-sortable="true">Имя</th>
<th data-sortable="true" data-sorter="priceSorter">Цена</th>
<th data-sortable="true" data-sort-name="date" data-sort-order="desc">Дата</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Продукт А</td>
<td>₽1,500.00</td>
<td>2023-07-15</td>
</tr>
<!-- Другие строки данных -->
</tbody>
</table>

// Инициализация таблицы
$(function() {
$('#table').bootstrapTable();
});

// Пользовательская функция сортировки для цен
function priceSorter(a, b) {
// Удаляем символы валюты и запятые, преобразуем в число
a = a.replace(/[₽,]/g, '') * 1;
b = b.replace(/[₽,]/g, '') * 1;

if (a > b) return 1;
if (a < b) return -1;
return 0;
}

$('#table').bootstrapTable({
sortReset: true, // Позволяет сбросить сортировку после двойного клика
sortStable: true, // Стабильная сортировка
locale: 'ru-RU', // Локализация для русскоязычных пользователей
columns: [{
field: 'id',
title: 'ID',
sortable: true
}, {
field: 'name',
title: 'Имя',
sortable: true
}, {
field: 'price',
title: 'Цена',
sortable: true,
sorter: 'priceSorter'
}, {
field: 'date',
title: 'Дата',
sortable: true,
sortName: 'date', // Имя поля для сортировки
sortOrder: 'desc' // Направление сортировки по умолчанию
}],
onSort: function(name, order) {
console.log('Таблица отсортирована по полю ' + name + ' в порядке ' + order);
// Дополнительные действия при сортировке
}
});

<!-- HTML-структура -->
<table id="simpleTable">
<thead>
<tr>
<th onclick="sortTable(0)">Имя</th>
<th onclick="sortTable(1)">Возраст</th>
</tr>
</thead>
<tbody>
<tr><td>Анна</td><td>28</td></tr>
<tr><td>Борис</td><td>42</td></tr>
<tr><td>Виктор</td><td>35</td></tr>
</tbody>
</table>

<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("simpleTable");
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;
}
}
}
}
</script>

<!-- Добавляем классы для стилизации -->
<th class="sortable" data-type="text">Имя</th>
<th class="sortable" data-type="number">Возраст</th>
<th class="sortable" data-type="date">Дата регистрации</th>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Находим все заголовки с классом sortable
const sortableHeaders = document.querySelectorAll('th.sortable');

sortableHeaders.forEach(header => {
// Добавляем иконку сортировки
header.innerHTML += ' <span class="sort-icon">⇅</span>';

// Добавляем обработчик клика
header.addEventListener('click', function() {
const table = this.closest('table');
const index = Array.from(this.parentNode.children).indexOf(this);
const type = this.getAttribute('data-type');

// Определяем текущее направление сортировки
let direction = this.getAttribute('data-direction') || 'asc';
direction = direction === 'asc' ? 'desc' : 'asc';

// Сбрасываем направление у всех заголовков
sortableHeaders.forEach(h => {
h.setAttribute('data-direction', '');
h.querySelector('.sort-icon').textContent = '⇅';
});

// Устанавливаем направление и иконку для текущего заголовка
this.setAttribute('data-direction', direction);
this.querySelector('.sort-icon').textContent = direction === 'asc' ? '↑' : '↓';

// Сортируем таблицу
sortTableByColumn(table, index, type, direction);
});
});

function sortTableByColumn(table, columnIndex, type, direction) {
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));

const sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${columnIndex + 1})`).textContent.trim();

let comparison = 0;
if (type === 'number') {
comparison = parseFloat(aColText) – parseFloat(bColText);
} else if (type === 'date') {
comparison = new Date(aColText) – new Date(bColText);
} else {
comparison = aColText.localeCompare(bColText);
}

return direction === 'asc' ? comparison : -comparison;
});

// Очищаем таблицу и добавляем отсортированные строки
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}

tbody.append(...sortedRows);
}
});
</script>

<style>
th.sortable {
cursor: pointer;
position: relative;
}

th.sortable:hover {
background-color: #f8f9fa;
}

.sort-icon {
font-size: 0.8em;
margin-left: 5px;
}
</style>

<!-- Подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
$('.sortable').on('click', function() {
const $table = $(this).closest('table');
const index = $(this).index();
const type = $(this).data('type');
const $tbody = $table.find('tbody');
const $rows = $tbody.find('tr').toArray();

// Изменяем направление сортировки
const dir = $(this).hasClass('asc') ? 'desc' : 'asc';

// Сбрасываем классы сортировки у всех заголовков
$('.sortable').removeClass('asc desc');
$(this).addClass(dir);

// Сортируем строки
const sortedRows = $rows.sort(function(a, b) {
const aValue = $(a).find('td').eq(index).text().trim();
const bValue = $(b).find('td').eq(index).text().trim();

if (type === 'number') {
return dir === 'asc' ? 
parseFloat(aValue) – parseFloat(bValue) : 
parseFloat(bValue) – parseFloat(aValue);
} else if (type === 'date') {
return dir === 'asc' ? 
new Date(aValue) – new Date(bValue) : 
new Date(bValue) – new Date(aValue);
} else {
return dir === 'asc' ? 
aValue.localeCompare(bValue) : 
bValue.localeCompare(aValue);
}
});

// Обновляем содержимое таблицы
$tbody.empty().append(sortedRows);

// Добавляем анимацию для подсветки изменений
$tbody.find('tr').addClass('highlight');
setTimeout(function() {
$tbody.find('tr').removeClass('highlight');
}, 500);
});
});
</script>

<style>
th.sortable {
cursor: pointer;
position: relative;
padding-right: 20px;
}

th.sortable:before,
th.sortable:after {
content: '';
position: absolute;
right: 8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}

th.sortable:before {
top: 30%;
border-bottom: 5px solid #ccc;
}

th.sortable:after {
bottom: 30%;
border-top: 5px solid #ccc;
}

th.sortable.asc:before {
border-bottom: 5px solid #333;
}

th.sortable.desc:after {
border-top: 5px solid #333;
}

tr.highlight {
background-color: rgba(255, 255, 0, 0.2);
transition: background-color 0.5s;
}
</style>

<!-- Подключаем необходимые файлы -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<!-- HTML-структура -->
<table id="advancedTable" class="display" style="width:100%">
<thead>
<tr>
<th>Имя</th>
<th>Должность</th>
<th>Офис</th>
<th>Возраст</th>
<th>Дата начала</th>
<th>Зарплата</th>
</tr>
</thead>
</table>

<script>
$(document).ready(function() {
$('#advancedTable').DataTable({
"processing": true, // Показывать индикатор загрузки
"serverSide": true, // Использовать серверную обработку данных
"ajax": {
"url": "/api/data", // URL для получения данных
"type": "POST"
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ 
"data": "salary",
"render": function(data, type, row) {
// Форматируем вывод зарплаты
return type === 'display' || type === 'filter' ? 
'₽' + data.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : 
data;
}
}
],
"order": [[4, "desc"]], // Сортировка по умолчанию по дате начала работы
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/ru.json"
},
"dom": 'Bfrtip', // Настройка отображения элементов управления
"buttons": [
'copy', 'excel', 'pdf', 'print' // Добавляем кнопки экспорта
],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Все"]], // Опции для выбора количества записей
"stateSave": true, // Сохранение состояния между перезагрузками страницы
"responsive": true // Адаптивный дизайн
});
});
</script>