Inter-Net.PRO

javascript   Как реализовать сортировку данных в HTML-таблице на сайте.

  Задача: сделать так, чтобы в таблице при клике по ячейке таблицы с названием колонки, происходила сортировка данных по возврастанию и убыванию.

  Вполне решаемая задача, для реализации которой нам понадобится JavaScript.

 


Сортировка в таблице

Демо сортировки таблицы:

  Покликайте по заголовкам колонок:

id Имя Страна Баланс
1 Владимир Россия 147
2 Александр Белорусь 0
3 Lisa Англия 65
4 Мутумба Зимбабве -43
5 Donald США 350
6 Angela Германия 350.2

 

Код HTML

<table class="table_sort">
    <thead>
        <tr>
            <th>id</th>
            <th>Имя</th>
            <th>Страна</th>
            <th>Баланс</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Владимир</td>
            <td>Россия</td>
            <td>147</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Александр</td>
            <td>Белорусь</td>
            <td>0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Lisa</td>
            <td>Англия</td>
            <td>65</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Мутумба</td>
            <td>Зимбабве</td>
            <td>-43</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Donald</td>
            <td>США</td>
            <td>350</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Angela</td>
            <td>Германия</td>
            <td>37</td>
        </tr>
    </tbody>
</table>

  Обратите внимание, что у таблицы в открывающем теге table стоит class="table_sort". Именно этот класс для js-скрипта является индикатором того, что таблица должна быть сортируемой.

  Таблица имеет структуру по HTML 5. В её структуре обязательно должны быть thead и tbody. Присутствие в структуре таблице tfoot необязательно, но возможно. tfoot не сломает сортировку таблицы.

Javascript

  Скрипт сортирующий таблицу:

document.addEventListener('DOMContentLoaded', () => {

    const getSort = ({ target }) => {
        const order = (target.dataset.order = -(target.dataset.order || -1));
        const index = [...target.parentNode.cells].indexOf(target);
        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
        const comparator = (index, order) => (a, b) => order * collator.compare(
            a.children[index].innerHTML,
            b.children[index].innerHTML
        );
        
        for(const tBody of target.closest('table').tBodies)
            tBody.append(...[...tBody.rows].sort(comparator(index, order)));

        for(const cell of target.parentNode.cells)
            cell.classList.toggle('sorted', cell === target);
    };
    
    document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));
    
});

  Данный скрипт позволяет иметь на странице не одну, а неограниченное количество сортируемых таблиц. Текстовые значения сортируются по алфавитному порядку, а числовые значения по велечине.

  Повторю, что скрипт находит только те таблицы, у которых стоит class="table_sort".

  Если данный скрит вставляете в HTML, через виджеты или модули, то не забудьте его обернуть тегами script

<script>тут код скрипта</script>

 

Стили CSS

  Так же выкладываю стили, которые я написал для демо-таблицы. Их можно взять за основу и подправить или дополнить под ваши нужды:

.table_sort table {
    border-collapse: collapse;
}

.table_sort th {
    color: #ffebcd;
    background: #008b8b;
    cursor: pointer;
}

.table_sort td,
.table_sort th {
    width: 150px;
    height: 40px;
    text-align: center;
    border: 2px solid #846868;
}

.table_sort tbody tr:nth-child(even) {
    background: #e3e3e3;
}

th.sorted[data-order="1"],
th.sorted[data-order="-1"] {
    position: relative;
}

th.sorted[data-order="1"]::after,
th.sorted[data-order="-1"]::after {
    right: 8px;
    position: absolute;
}

th.sorted[data-order="-1"]::after {
	content: "▼"
}

th.sorted[data-order="1"]::after {
	content: "▲"
}

 

Авторизация

Войти через соцсети: