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

对于Jquery数据表如何实现多列排序和重绘表格的问题，可以使用Jquery的插件或者自定义方法来实现。以下是一个示例的解答：

多列排序：可以使用Jquery的插件如DataTable或者自定义方法来实现多列排序。这些插件可以通过配置指定多个列进行排序，并且可以选择升序（asc）或降序（desc）排序方式。

DataTable插件示例：

DataTable是一个功能强大的Jquery插件，可以用于快速实现数据表格的排序、搜索、分页等功能。

使用DataTable插件，首先需要引入相关的CSS和JS文件，并将HTML表格转化为DataTable。

<!-- 引入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>

上述示例代码中，通过引入DataTable的CSS和JS文件，并在HTML表格上应用id="example"，即可将该表格转化为可排序的DataTable。默认情况下，DataTable会在每列的表头上添加排序按钮，点击按钮即可实现升序或降序排序。

自定义方法示例：

如果不想使用插件，也可以通过自定义方法来实现多列排序。以下是一个简单的示例代码：

<!-- 引入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>

上述示例代码中，通过在表头的每个列添加onclick事件，并调用sortTable()函数来实现排序功能。sortTable()函数根据当前排序方向（默认为升序），比较每一行的对应列的值，并根据排序方向来决定是否交换行的位置，实现排序功能。

重绘表格：当点击表头时，如果需要重新根据排序后的顺序重绘表格，可以通过以下方式实现：

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

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

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

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

通过在排序方法中添加redrawTable()函数，可以实现在排序后重新绘制表格的功能。redrawTable()函数可以清空表格内容，然后根据当前排序后的顺序重新填充表格内容（包括表头），从而实现重绘表格的效果。

以上是关于Jquery数据表如何实现多列排序和重绘表格的一种解答。在实际应用中，可以根据具体需求选择使用合适的Jquery插件或自定义方法来实现多列排序和重绘表格的功能。