Jquery数据表-如何做多列排序和重绘表格，当点击标题时，它可以是asc或desc

<!-- 引入DataTable的CSS和JS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<!-- 将HTML表格转化为DataTable -->
<script>
$(document).ready(function() {
    $('#example').DataTable();
});
</script>

<!-- HTML表格 -->
<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>30</td>
            <td>6000</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>20</td>
            <td>4000</td>
        </tr>
    </tbody>
</table>

<!-- 引入Jquery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- HTML表格 -->
<table id="myTable">
    <thead>
        <tr>
            <th onclick="sortTable(0)">Name</th>
            <th onclick="sortTable(1)">Age</th>
            <th onclick="sortTable(2)">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>5000</td>
        </tr>
        <tr>
            <td>Mike</td>
            <td>30</td>
            <td>6000</td>
        </tr>
        <tr>
            <td>Lisa</td>
            <td>20</td>
            <td>4000</td>
        </tr>
    </tbody>
</table>

<!-- 自定义排序方法 -->
<script>
function sortTable(columnIndex) {
    var table, rows, switching, i, x, y, shouldSwitch, direction, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    // 设置初始排序方向为升序
    direction = "asc";

    // 循环，直到没有需要交换的行
    while (switching) {
        switching = false;
        rows = table.rows;

        // 遍历表格的每一行（除表头）
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("td")[columnIndex];
            y = rows[i + 1].getElementsByTagName("td")[columnIndex];

            // 判断排序方向
            if (direction == "asc") {
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    shouldSwitch= true;
                    break;
                }
            } else if (direction == "desc") {
                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                    shouldSwitch= true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            // 交换行
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            // 每次交换后，递增计数器
            switchcount ++;
        } else {
            // 如果没有需要交换的行且排序方向为升序，则改为降序并重新开始循环
            if (switchcount == 0 && direction == "asc") {
                direction = "desc";
                switching = true;
            }
        }
    }
}
</script>

// 在排序方法中添加重绘表格的代码
function sortTable(columnIndex) {
    // 省略其他代码...

    // 循环完毕后重绘表格
    redrawTable();
}

// 重绘表格
function redrawTable() {
    var table = document.getElementById("myTable");
    // 清空表格内容
    table.innerHTML = "";

    // 重新填充表格内容（包括表头）
    // 省略代码...
}