js table 多列排序

在JavaScript中实现表格（table）的多列排序通常涉及以下几个基础概念：

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM），获取和修改表格中的数据。
事件监听：为表格的表头（th）添加点击事件，当用户点击某一列时触发排序功能。
排序算法：对获取到的表格数据进行排序，常用的有冒泡排序、快速排序等。在实际应用中，可以使用JavaScript内置的Array.prototype.sort()方法简化排序过程。
多列排序逻辑：记录每一列的排序状态（升序、降序），并根据多个排序条件依次对数据进行排序。

类型

单一排序：按一列进行排序。
多列排序：按多个列的优先级依次排序，每一列可以独立设置升序或降序。

应用场景

数据报表：在展示大量数据时，用户可能需要根据不同维度进行排序，如先按时间排序，再按销售额排序。
管理后台：对用户列表、订单列表等进行多条件筛选和排序。
数据分析工具：支持多维度的数据排序，便于数据分析和决策。

实现示例

以下是一个简单的JavaScript实现多列排序的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多列排序示例</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            cursor: pointer;
        }
        th.asc::after {
            content: " ▲";
        }
        th.desc::after {
            content: " ▼";
        }
    </style>
</head>
<body>

<table id="myTable">
    <thead>
        <tr>
            <th data-key="name">姓名</th>
            <th data-key="age">年龄</th>
            <th data-key="score">分数</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>25</td><td>85</td></tr>
        <tr><td>李四</td><td>30</td><td>90</td></tr>
        <tr><td>王五</td><td>25</td><td>80</td></tr>
        <!-- 更多行 -->
    </tbody>
</table>

<script>
    const table = document.getElementById('myTable');
    const headers = table.querySelectorAll('th');
    let sortStates = {}; // 记录每列的排序状态

    headers.forEach(header => {
        header.addEventListener('click', () => {
            const key = header.getAttribute('data-key');
            let direction = 'asc';
            if (sortStates[key] === 'asc') {
                direction = 'desc';
            }
            sortTable(key, direction);
            updateSortIndicators(key, direction);
        });
    });

    function sortTable(key, direction) {
        const tbody = table.querySelector('tbody');
        const rows = Array.from(tbody.querySelectorAll('tr'));

        rows.sort((a, b) => {
            const aText = a.querySelector(`td:nth-child(${getColumnIndex(key)})`).textContent;
            const bText = b.querySelector(`td:nth-child(${getColumnIndex(key)})`).textContent;

            if (isNaN(aText) && isNaN(bText)) {
                return direction === 'asc' ? aText.localeCompare(bText) : bText.localeCompare(aText);
            } else {
                return direction === 'asc' ? aText - bText : bText - aText;
            }
        });

        // 清空现有行并重新添加排序后的行
        tbody.innerHTML = '';
        rows.forEach(row => tbody.appendChild(row));
    }

    function getColumnIndex(key) {
        return Array.from(headers).findIndex(header => header.getAttribute('data-key') === key) + 1;
    }

    function updateSortIndicators(activeKey, direction) {
        headers.forEach(header => {
            header.classList.remove('asc', 'desc');
            const key = header.getAttribute('data-key');
            if (key === activeKey) {
                header.classList.add(direction);
            }
        });
        sortStates[activeKey] = direction;
    }
</script>

</body>
</html>

可能遇到的问题及解决方法

排序状态混乱：
- 原因：未正确记录每列的排序状态，导致多次点击同一列时排序方向错误。
- 解决方法：使用一个对象（如sortStates）来记录每列当前的排序状态（升序或降序），并在每次排序时更新该状态。

多列排序优先级问题：
- 原因：当实现多列排序时，可能无法正确按照设定的优先级进行排序。
- 解决方法：在排序函数中，首先按第一优先级的列排序，然后对结果再按第二优先级的列排序，以此类推。或者使用稳定的排序算法，确保前面的排序不会被后面的排序打乱。
数据类型处理不当：
- 原因：未区分文本和数字类型的数据，导致排序结果不符合预期。
- 解决方法：在比较前判断数据类型，如果是数字则进行数值比较，否则进行字符串比较。
性能问题：
- 原因：当表格数据量较大时，前端排序可能导致页面卡顿或响应缓慢。
- 解决方法：
  - 优化排序算法，减少不必要的DOM操作。
  - 对大数据量表格采用虚拟滚动技术，仅渲染可视区域的数据。
  - 在必要时，将排序任务交给服务器处理，前端只负责展示。