Функция для сортировки таблицы
Привет.
Есть функция которая сортирует колонку по возростанию по клику на хэдер. При повторном клике сортируется по убыванию. То что я написал мне не сильно нравится. Как правильно организовать логику сортировки? https://codepen.io/everest08/pen/KrdPLP |
|
Агонь.:victory:
:blink: Не сразу понял откуда берётся 1 в data-order Спасибо |
сортировка таблицы по клику на ячейку первой строки es6.
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
font-family: 'Roboto';
}
td, th {
border: 2px solid red;
width: 150px;
height: 40px;
text-align: center;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th {
cursor: pointer;
}</style>
</head>
<body>
<table class="sort" id="sort" align="center">
<tr id="zag">
<td>ID</td>
<td>Имя</td>
<td>Фамилия</td>
<td>Сайт</td>
<td>Переключалка стилей</td>
</tr>
<tr>
<td>1</td>
<td>Александр</td>
<td>Шуркаев</td>
<td><a href="#">htmlcoder.visions.ru</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>123</td>
<td>Пол</td>
<td>Соуден</td>
<td><a href="#">idontsmoke.co.uk</a></td>
<td>Угу</td>
</tr>
<tr>
<td>3</td>
<td>Джеффри</td>
<td>Зельдман</td>
<td><a href="#">zeldman.com</a></td>
<td>Угу</td>
</tr>
<tr>
<td>44</td>
<td>Аарон</td>
<td>Будман</td>
<td><a href="#">youngpup.net</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>11</td>
<td>Глен</td>
<td>Мерфи</td>
<td><a href="#">glenmurphy.com</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>15</td>
<td>Даниель</td>
<td>Боган</td>
<td><a href="#">waferbaby.com</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>33</td>
<td>Ден</td>
<td>Бенджамин</td>
<td><a href="#">hivelogic.com</a></td>
<td>Угу</td>
</tr>
</table>
<table class="sort" align="center">
<thead>
<tr>
<th>Name</th>
<th>SecondName</th>
<th>Patronymic</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Макс</td>
<td>Троцкий</td>
<td>Ильич</td>
<td>77</td>
</tr>
<tr>
<td>Вася</td>
<td>Петров</td>
<td>Александрович</td>
<td>21</td>
</tr>
<tr>
<td>Петя</td>
<td>Иванов</td>
<td>Петрович</td>
<td>15</td>
</tr>
<tr>
<td>Миша</td>
<td>Ложкин</td>
<td>Васильевич</td>
<td>43</td>
</tr>
<tr>
<td>Владимир</td>
<td>Сидоров</td>
<td>Игоревич</td>
<td>33</td>
</tr>
<tr>
<td>Коля</td>
<td>Колбаскин</td>
<td>Олегович</td>
<td>41</td>
</tr>
</tbody>
</table>
<script>
addEventListener("load", function() {
(function(f) {
function g(c) {
return function(b, a) {
b = b.cells[c].textContent;
a = a.cells[c].textContent;
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
}
}
function init(d) {
const [{cells}, ...e] = [...d.rows];
const tbody = e[0].parentNode;
[...cells].forEach((c, b) => {
let a = 0;
c.addEventListener("click", () => {
e.sort(g(b));
a && e.reverse();
tbody.append(...e);
a ^= 1
})
})
}
document.querySelectorAll(f).forEach(init)
})(".sort")
});
</script>
</body>
</html>
|
рони,
а можете во второй таблице последнюю колонку поменять на Balance и изменить в ней значения чтобы был нуль, значения с десятичными, отрицательные значения и с разным количеством символов (1, 10, 100, 1000). Я тему добавил в избранное, просто хотелось чтобы сразу код продебажили, ведь сортировка чисел будет посложнее чем букв. |
Цитата:
Сортирует от меньшего большего в таком порядке 1, 1500, 33, 41, 43, 77 |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
font-family: 'Roboto';
}
td, th {
border: 2px solid red;
width: 150px;
height: 40px;
text-align: center;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th {
cursor: pointer;
}</style>
</head>
<body>
<table class="sort" align="center">
<thead>
<tr>
<th>Name</th>
<th>SecondName</th>
<th>Patronymic</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Макс</td>
<td>Троцкий</td>
<td>Ильич</td>
<td>-7700</td>
</tr>
<tr>
<td>Вася</td>
<td>Петров</td>
<td>Александрович</td>
<td>210000</td>
</tr>
<tr>
<td>Петя</td>
<td>Иванов</td>
<td>Петрович</td>
<td>0</td>
</tr>
<tr>
<td>Миша</td>
<td>Ложкин</td>
<td>Васильевич</td>
<td>1043.006</td>
</tr>
<tr>
<td>Владимир</td>
<td>Сидоров</td>
<td>Игоревич</td>
<td>3.05</td>
</tr>
<tr>
<td>Коля</td>
<td>Колбаскин</td>
<td>Олегович</td>
<td>-41.6</td>
</tr>
</tbody>
</table>
<script>
addEventListener("load", function() {
(function(f) {
function g(c) {
return function(b, a) {
b = b.cells[c].textContent;
a = a.cells[c].textContent;
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
}
}
function init(d) {
const [{cells}, ...e] = [...d.rows];
const tbody = e[0].parentNode;
[...cells].forEach((c, b) => {
var a = 0;
c.addEventListener("click", () => {
e.sort(g(b));
a && e.reverse();
tbody.append(...e);
a ^= 1
})
})
}
document.querySelectorAll(f).forEach(init)
})(".sort")
});
</script>
</body>
</html>
|
Цитата:
Я не сразу заметил, вот оно где условие b = +b || b; a = +a || a; return b > a ? 1 : b < a ? -1 : 0 |
Цитата:
Цитата:
new Intl.Collator(["en", "ru"], { numeric: true });
, чтобы сравнивать строки по-русский, по-английский и числа. (ё по-русский будет сравниваться как в алфавите)На самом деле это очень простая задача и решается она просто! codepen.io/Malleys/pen/dQGMbP UPD Цитата:
const [{cells}, ...e] = d.rows;
достаточно.Цитата:
UPD2 Цитата:
|
Malleys,
а если так индекс const index = [...target.parentNode.cells].indexOf(target); |
| Часовой пояс GMT +3, время: 20:44. |