Question

我有一个网格，其中包含来自百里香属性的数据。

我在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;
                }
            }
        }
    }

通过js分页在百里香网格中对数据进行排序

1 个答案: