ASP.NET MVC中jQuery DataTable排序时数据消失/显示旧数据问题

问题场景 #

在ASP.NET MVC项目里，实现了根据下拉列表选中项动态加载数据的jQuery DataTable，但对任意列执行排序操作时，表格数据会直接消失，或是显示之前选中下拉项的旧数据。

现有代码 #

HTML表格 #

用于展示数据的表格结构：

<table class="table table-condensed table-striped table-hover" id="myTable">
    <thead class="bg-primary">
        <tr>
            <th>S.No</th>
            <th width="20%">Name of Air Operator</th>
            <th width="20%">ID</th>
            <th width="20%">Type</th>
            <th>Submitted</th>
            <th>Approved</th>
            <th>Rejected</th>
            <th>Pending</th>
        </tr>
    </thead>
    <tbody id="OpeatatorDetails" class="table-bordered">
       
    </tbody>
</table>

筛选下拉框 #

用于选择数据范围的下拉控件：

<div class="container mt-5" id="operatorwiseContainer">
    <div class="row">
        <div class="col-md">
            <select class="form-control" id="ddlOperatorwise">
                <option value="-1">--Select--</option>
                <option value=""> ALL </option>
            </select>
        </div>
    </div>
</div>

下拉框切换事件 #

选项改变时触发数据加载的事件：

$('#ddlOperatorwise').change(function () {
    var aopID = $(this).val();
    ShowData(aopID);
});

数据加载方法 #

通过Ajax获取数据并渲染表格的方法：

function ShowData(aopID) {          
    var aopID = aopID;
    $.ajax({
        type: "GET",
        url: '/t_operation_request/NewAOI',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: { aopID: aopID},
        success: function (data) {
            $('#OpeatatorDetails').empty();
            var j = 1;
            var rows;
            $.each(data, function (i, item) {
                rows += "<tr>"
                    + "<td>" + j++ + "</td>"
                    + "<td>" + name + "</td>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + " " + "</td>"
                    + "<td>" + item.submitted + "</td>"
                    + "<td>" + item.approved + "</td>"
                    + "<td>" + item.rejected + "</td>"
                    + "<td>" + item.pending +"</td>"
                    + "</tr>";
            });
            $('#OpeatatorDetails').append(rows);
            $('#myTable').dataTable();
        },
        error: function () {
            alert("Something went wrong!");
        }
    });
}

问题原因及修复方案 #

核心问题 #

1. 重复初始化DataTable：每次切换下拉选项都直接调用$('#myTable').dataTable()，但没有销毁之前创建的DataTable实例，导致多个实例冲突，排序时会读取旧实例的缓存数据，或者新实例初始化异常导致数据消失。
2. 变量未初始化：rows变量未赋值初始值，拼接HTML时会在开头多出undefined，可能干扰表格渲染。
3. 未定义变量：代码中的name变量没有对应数据源，会导致该列显示undefined。

修复后的代码 #

修改ShowData方法，解决上述问题：

function ShowData(aopID) {          
    // 先销毁已存在的DataTable实例，避免冲突
    const table = $('#myTable').DataTable();
    if (table) {
        table.destroy();
    }

    $.ajax({
        type: "GET",
        url: '/t_operation_request/NewAOI',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: { aopID: aopID},
        success: function (data) {
            $('#OpeatatorDetails').empty();
            let j = 1;
            let rows = ""; // 初始化空字符串，避免undefined前缀
            $.each(data, function (i, item) {
                // 替换name为实际返回的属性，比如item.name，根据后端接口调整
                rows += `<tr>
                        <td>${j++}</td>
                        <td>${item.name || ""}</td>
                        <td>${item.id}</td>
                        <td></td>
                        <td>${item.submitted}</td>
                        <td>${item.approved}</td>
                        <td>${item.rejected}</td>
                        <td>${item.pending}</td>
                    </tr>`;
            });
            $('#OpeatatorDetails').append(rows);
            // 重新初始化DataTable，可添加自定义配置
            $('#myTable').DataTable({
                order: [[0, "asc"]] // 默认按S.No列升序排序
            });
        },
        error: function () {
            alert("加载数据出错！");
        }
    });
}

额外优化建议 #

如果数据量较大，建议开启DataTable的服务器端模式（serverSide: true），让排序、分页等操作都请求后端接口，确保每次操作都基于当前下拉选中的筛选条件获取最新数据，避免客户端缓存问题。

内容的提问来源于stack exchange，提问作者MD SAQUIB RAZA