Как отсортировать таблицу на чистом javascript

03.04.2021

Иногда требуется отсортировать HTML таблицу, без обращения к серверу. Это можно спокойно сделать на простом JavaScript.

Результат:

pic1

Небольшой CSS для вывода указателя по какому столбцу сортируем:

 
    .table thead th {
        vertical-align: middle;
        cursor: pointer;
        position: relative;
        user-select: none;
    }

    .table thead th > div {
        padding-right: 20px;
        user-select: none;
    }

    th._active_up div::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        border: 10px solid transparent; /* Прозрачные границы */
        border-top: 10px solid #ffeeba; /* Добавляем треугольник */
    }

    th._active_down div::after {
        content: '';
        position: absolute;
        top: 25%;
        right: 10px;
        border: 10px solid transparent; /* Прозрачные границы */
        border-bottom: 10px solid #ffeeba; /* Добавляем треугольник */
    }

JavaScript отвечающий за сортировку:

 
    const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

    const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
            v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

    // do the work...
    document.querySelectorAll('th').forEach(th => th.addEventListener('click', ((event) => {
        const table = th.closest('table');
        const THs = document.querySelectorAll('th');

        if (th.classList.contains("_active_up")) {
            th.classList.add("_active_down");
            th.classList.remove("_active_up");
        } else if (th.classList.contains("_active_down")) {
            th.classList.add("_active_up");
            th.classList.remove("_active_down");
        } else {
            THs.forEach(el => { el.classList.remove("_active_down") });
            THs.forEach(el => { el.classList.remove("_active_up") });
            th.classList.add("_active_up");
        }

        Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
            .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
            .forEach(tr => table.appendChild(tr) );
    })));

Пример самой HTML таблицы:

 

            <table class="table">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">
                        <div>ID</div>
                    </th>
                    <th scope="col">
                        <div>Наименование</div>
                    </th>
                    <th scope="col">
                        <div>Код товара</div>
                    </th>
                    <th scope="col">
                        <div>Статус</div>
                    </th>
                    <th scope="col">
                        <div>Новый товар</div>
                    </th>
                </tr>

                </thead>

                <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <?
                    foreach($aItems as $oItem)
                    {
                    ?>
                    <td scope="row">
                        <b><?=$oItem->id?></b>
                    </td>
                    <td>
                        <?=$oItem->title?>
                    </td>
                    <td>
                        <?=$oItem->code?$oItem->code:$oItem->sku?>
                    </td>
                    <td>
                        <div class="alert <?=$oItem->status=='1'?'alert-success':'alert-danger'?> " role="alert">
                            <?=$oItem->status=='1'?'OK':$oItem->ru_message?>
                        </div>
                    </td>
                    <td>
                        <div class="alert <?=$oItem->is_new=='1'?'alert-warning':'alert-info'?> " role="alert">
                            <?=$oItem->is_new=='1'?'<b>Да</b>':'Нет'?>
                        </div>
                    </td>
                </tr>
                <?
                }
                ?>
                </tbody>
            </table>


Категории: Web, JavaScript, HTML
Пометки: Сортируем HTML таблицу на JavaScript
Яндекс.Метрика