Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.11.2018, 16:07
Интересующийся
Отправить личное сообщение для JStudent Посмотреть профиль Найти все сообщения от JStudent
 
Регистрация: 10.04.2018
Сообщений: 14

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

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

https://codepen.io/everest08/pen/KrdPLP
Ответить с цитированием
  #2 (permalink)  
Старый 07.11.2018, 17:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

codepen.io/Malleys/pen/dQGMbP
Ответить с цитированием
  #3 (permalink)  
Старый 07.11.2018, 17:59
Интересующийся
Отправить личное сообщение для JStudent Посмотреть профиль Найти все сообщения от JStudent
 
Регистрация: 10.04.2018
Сообщений: 14

Агонь.

Не сразу понял откуда берётся 1 в data-order
Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 07.11.2018, 18:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,822

сортировка таблицы по клику на ячейку первой строки es6.

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

Последний раз редактировалось рони, 07.11.2018 в 18:36. Причина: tbody.append(...e); спасибо Malleys
Ответить с цитированием
  #5 (permalink)  
Старый 07.11.2018, 19:34
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

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

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

Последний раз редактировалось MC-XOBAHCK, 07.11.2018 в 19:37.
Ответить с цитированием
  #6 (permalink)  
Старый 07.11.2018, 19:49
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

Сообщение от Malleys Посмотреть сообщение
codepen.io/Malleys/pen/dQGMbP
похоже там баг для чисел.
Сортирует от меньшего большего в таком порядке
1, 1500, 33, 41, 43, 77
Ответить с цитированием
  #7 (permalink)  
Старый 07.11.2018, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,822

Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 07.11.2018, 20:24
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

Сообщение от рони
так?
Да.
Я не сразу заметил, вот оно где условие
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
Ответить с цитированием
  #9 (permalink)  
Старый 08.11.2018, 00:37
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,180

Сообщение от 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);
Да, да, да, именно так и надо!

Последний раз редактировалось Malleys, 08.11.2018 в 01:17. Причина: Добавил для рони
Ответить с цитированием
  #10 (permalink)  
Старый 08.11.2018, 01:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,822

Malleys,
а если так индекс
const index = [...target.parentNode.cells].indexOf(target);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как очистить часть страницы для повторной загрузки таблицы? Vlad_Gera Элементы интерфейса 1 21.03.2017 21:42
Какие существуют библиотеки или алгоритмы генерации индексов для сортировки по-порядк Shitbox2 Общие вопросы Javascript 10 14.07.2015 13:32
Функция для дозагрузки контента Wahtel Ваши сайты и скрипты 3 06.01.2015 17:05
Одна функция для всех тегов по одному событию antsivash Общие вопросы Javascript 1 21.10.2012 23:18
Функция для jQuery qwermjk Общие вопросы Javascript 4 25.01.2011 08:56