Сортировка данных в сетке тимелист с нумерацией страниц через js

Question

У меня есть сетка с данными из атрибута thymeleaf.

Я настолько новичок в JS, что пытаюсь сделать его как в руководстве.https://www.w3schools.com/howto/howto_js_sort_table.asp Но у меня есть некоторые проблемы.Во-первых, есть таблица, и у меня есть сетка.Во-вторых, я не могу выбрать через JS свои данные.Это всегда не определено.

Может кто-нибудь помочь мне с некоторыми советами?Кроме того, я могу сделать сортировку по всем данным, или она будет сортировать только постраничные данные страницы?

<div id="dep-grid" class="departments_table highlight">
        <div class="head_departments">
            <span class="head-left-grid">Name <i class="tiny material-icons arrow-sort-button">expand_more</i></span>
            <span class="head-right-grid">Edit</span>
        </div>
        <ul>
            <div class="dep-body" th:each="department : ${departmentPage.content}">
                <li id="dep-li" class="left-column" th:text="${department.name}"></li>
                <li class="right-column">
                    <div class="dep_edit">
                        <a id="dep-modal-pic" class="edit_dep modal-trigger" href="#modal3"
                           th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\' , \'' + ${department.name} +'\');'"><i
                                class="material-icons">more_horiz</i></a>
                    </div>
                </li>
            </div>
        </ul>
    </div>
    <div class="pagination pagination-dep">
        <ul>
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li><a th:if="${departmentPage.totalPages > 0}" th:each="pageNumber : ${pageNumbers}"
                   th:href="@{/departments(size=${departmentPage.size}, page=${pageNumber})}" th:text="${pageNumber}"
                   th:class="${pageNumber==departmentPage.number + 1} ? active"></a></li>
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        </ul>
    </div>

Мне нужно добавить сортировку по названию отдела в заголовке.Просто нажмите, и он будет сортировать asd или dsc.

Answer 1

Решено:

 function sortDepartments() {
        var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, arrow;
        table = document.getElementById("dep-grid");
        arrow = document.getElementById('arrow-sort');
        switching = true;
        dir = "asc";
        while (switching) {
            switching = false;
            rows = table.getElementsByClassName('dep-body');
            for (i = 0; i < (rows.length - 1); i++) {
                shouldSwitch = false;
                x = rows[i].getElementsByClassName('left-column')[0];
                y = rows[i + 1].getElementsByClassName('left-column')[0];
                if (dir == "asc") {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        arrow.innerText = 'expand_more';
                        break;
                    }
                } else if (dir == "desc") {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        arrow.innerText = 'expand_less';
                        break;
                    }
                }
            }
            if (shouldSwitch) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                switching = true;
                switchcount++;
            } else {

                if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                }
            }
        }
    }