Форум

JStudent · #1 (**permalink**) 07.11.2018, 17:07

Привет.
Есть функция которая сортирует колонку по возростанию по клику на хэдер.
При повторном клике сортируется по убыванию.
То что я написал мне не сильно нравится.

Как правильно организовать логику сортировки?

https://codepen.io/everest08/pen/KrdPLP

Malleys · #2 (**permalink**) 07.11.2018, 18:30

codepen.io/Malleys/pen/dQGMbP

JStudent · #3 (**permalink**) 07.11.2018, 18:59

Агонь.

Не сразу понял откуда берётся 1 в data-order
Спасибо

рони · #4 (**permalink**) 07.11.2018, 19:17

<!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>

MC-XOBAHCK · #5 (**permalink**) 07.11.2018, 20:34

рони,
а можете во второй таблице последнюю колонку поменять на Balance и изменить в ней значения чтобы был нуль, значения с десятичными, отрицательные значения и с разным количеством символов (1, 10, 100, 1000).

Я тему добавил в избранное, просто хотелось чтобы сразу код продебажили, ведь сортировка чисел будет посложнее чем букв.

MC-XOBAHCK · #6 (**permalink**) 07.11.2018, 20:49

Сообщение от Malleys

codepen.io/Malleys/pen/dQGMbP

похоже там баг для чисел.
Сортирует от меньшего большего в таком порядке
1, 1500, 33, 41, 43, 77

рони · #7 (**permalink**) 07.11.2018, 21:04

Сообщение от MC-XOBAHCK

изменить в ней значения

так?

<!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>

MC-XOBAHCK · #8 (**permalink**) 07.11.2018, 21:24

Сообщение от рони

так?

Да.
Я не сразу заметил, вот оно где условие

b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0

Malleys · #9 (**permalink**) 08.11.2018, 01:37

Сообщение от MC-XOBAHCK

похоже там баг для чисел.
Сортирует от меньшего большего в таком порядке
1, 1500, 33, 41, 43, 77

Вообще-то нет! Оно сортировало в алфавитном порядке. Полезно, если, например, нужно отсортировать список телефонных номеров.

Сообщение от MC-XOBAHCK

сортировка чисел будет посложнее чем букв.

Для этого есть Internationalization API. Это не сложнее, чем

new Intl.Collator(["en", "ru"], { numeric: true });

, чтобы сравнивать строки по-русский, по-английский и числа. (ё по-русский будет сравниваться как в алфавите)

На самом деле это очень простая задача и решается она просто! codepen.io/Malleys/pen/dQGMbP

UPD

Сообщение от рони

const [{cells}, ...e] = [...d.rows];

У класса HTMLCollection есть свойство Symbol.iterator, но вы зачем-то используете его от массива. В чём прикол? Я думаю,

const [{cells}, ...e] = d.rows;

достаточно.

Сообщение от рони

e.sort(g(b));
a && e.reverse();

Эту сортировку можно организовать так, чтобы ещё потом не нужно было разворачивать массив.

UPD2

Сообщение от рони

Malleys,
а если так индекс
const index = [...target.parentNode.cells].indexOf(target);

Да, да, да, именно так и надо!

рони · #10 (**permalink**) 08.11.2018, 02:04

Malleys,
а если так индекс

const index = [...target.parentNode.cells].indexOf(target);

Форум

Справочник

Discord чат

Курсы javascript