点击jQuery DataTable行时弹出框显示旧数据问题求助

这个问题我太熟悉了！核心原因是旧的表格行事件绑定没有被更新，或者DataTable实例没有正确刷新——当你通过AJAX拉取新数据后，原来绑定在旧DOM行上的事件还在生效，点击时自然会拿到旧数据。下面给你两个最常用的解决方案，按需选择：

方案1：销毁旧实例后重新初始化（适合结构有变化的场景） #

如果你的表格列结构可能随数据变化，或者想彻底清空旧状态，推荐这个方法：

function getDashboardData() {
    var ddlState = $('#ContentPlaceHolder1_ddlR4GState').val();
    try {
        $('#grdMWSiteSurvey_wrapper').show();
        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: ddlState }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datVal = JSON.parse(data.d);
                
                // 关键步骤1：销毁已存在的DataTable实例
                if ($.fn.DataTable.isDataTable('#grdMWSiteSurvey')) {
                    $('#grdMWSiteSurvey').DataTable().destroy();
                }
                
                // 关键步骤2：清空表格旧内容（可选但推荐）
                $('#grdMWSiteSurvey').empty();
                
                // 关键步骤3：重新初始化表格并加载新数据
                var newDt = $('#grdMWSiteSurvey').DataTable({
                    data: datVal,
                    columns: [
                        // 替换成你的实际列定义，比如：
                        { data: 'StateName', title: 'State' },
                        { data: 'SurveyCount', title: 'Survey Count' }
                        // 其他列...
                    ]
                });
                
                // 关键步骤4：用事件委托绑定行点击（确保新行也能触发）
                $('#grdMWSiteSurvey tbody').off('click', 'tr').on('click', 'tr', function() {
                    var rowData = newDt.row(this).data();
                    // 这里替换成你的弹出框逻辑，比如：
                    alert(`当前行数据：${rowData.StateName} - ${rowData.SurveyCount}`);
                });
            }
        });
    } catch (ex) {
        console.error('加载数据失败:', ex);
    }
}

方案2：用DataTable内置方法刷新数据（更高效，适合固定列结构） #

如果表格列结构固定，推荐用clear()+rows.add()+draw()的组合，不用销毁实例，性能更好：

// 先在全局/页面加载时初始化一次DataTable实例
let dtInstance;
$(document).ready(function() {
    dtInstance = $('#grdMWSiteSurvey').DataTable({
        columns: [
            // 固定列定义，比如：
            { data: 'StateName', title: 'State' },
            { data: 'SurveyCount', title: 'Survey Count' }
        ]
    });
    
    // 一次性绑定事件委托（后续新行自动生效）
    $('#grdMWSiteSurvey tbody').on('click', 'tr', function() {
        var rowData = dtInstance.row(this).data();
        // 弹出框逻辑
        alert(`当前行数据：${rowData.StateName} - ${rowData.SurveyCount}`);
    });
});

function getDashboardData() {
    var ddlState = $('#ContentPlaceHolder1_ddlR4GState').val();
    try {
        $('#grdMWSiteSurvey_wrapper').show();
        $.ajax({
            type: "POST",
            url: "Dashboard.aspx/BindMWSiteSurvey",
            data: JSON.stringify({ STATE: ddlState }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var datVal = JSON.parse(data.d);
                
                // 关键：清空旧数据、添加新数据、刷新表格
                dtInstance.clear().rows.add(datVal).draw();
            }
        });
    } catch (ex) {
        console.error('加载数据失败:', ex);
    }
}

关键注意点 #

• 不要直接绑定tr的点击事件：比如$('tr').click(...)，这种方式只会绑定当时存在的行，新添加的行不会生效。一定要用事件委托绑定在tbody上。
• 避免重复绑定事件：如果用方案1，每次初始化前最好用off('click', 'tr')移除旧的绑定，防止同一行点击触发多次事件。

内容的提问来源于stack exchange，提问作者Nadeem