重新绑定ASP.NET Repeater后，如何刷新jQuery DataTable？

我之前也碰到过一模一样的情况——用Repeater填充的DataTable，后台重新绑定数据后前端表格死活不更新，直接调用刷新方法完全没效果。核心原因是：Repeater是服务器端控件，重新绑定后会在客户端重新生成表格的DOM结构，而原来的DataTable实例还绑定在旧的DOM上，自然无法感知到新数据。

下面是亲测有效的解决步骤：

步骤1：编写前端刷新函数，先销毁旧实例再重新初始化 #

你需要先销毁已存在的DataTable实例，再基于新的DOM重新初始化表格，而不是试图去刷新旧实例。示例代码如下：

function refreshDataTable() {
    // 检查目标表格是否已经是DataTable实例
    if ($.fn.DataTable.isDataTable('#yourTableId')) {
        // 销毁旧实例，释放资源
        $('#yourTableId').DataTable().destroy();
    }
    // 重新初始化DataTable，配置和你第一次初始化时保持一致
    $('#yourTableId').DataTable({
        paging: true,
        searching: true,
        ordering: true,
        // 其他你需要的配置项...
    });
}

步骤2：后台绑定Repeater后，注册脚本触发前端刷新 #

在后台完成Repeater的重新绑定操作后，通过服务器端代码注册前端脚本，让页面加载完成后自动调用上面的刷新函数。如果你的页面用了UpdatePanel，记得用ScriptManager.RegisterStartupScript，否则用ClientScript.RegisterStartupScript：

// 假设你的Repeater控件ID是rptCourses
rptCourses.DataSource = GetUpdatedCourseData(); // 你的更新数据源
rptCourses.DataBind();

// 注册刷新脚本，确保客户端执行refreshDataTable函数
ClientScript.RegisterStartupScript(
    this.GetType(),
    "RefreshDataTableScript",
    "refreshDataTable();",
    true
);

// 如果用了UpdatePanel，替换成下面的代码：
// ScriptManager.RegisterStartupScript(
//     this.UpdatePanel1,
//     this.UpdatePanel1.GetType(),
//     "RefreshDataTableScript",
//     "refreshDataTable();",
//     true
// );

关于tblCourses.fnPageChange()报错的说明 #

你提到的这个报错其实和当前的刷新问题无关——fnPageChange()是旧版本jQuery DataTable的API，新版本已经改用page()方法（比如$('#yourTableId').DataTable().page('first').draw();）。不过既然这个问题不影响核心需求，暂时不用纠结它。

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