ASP.NET GridView异步回发后丢失jQuery DataTables格式求助

问题根源 #

使用UpdatePanel做异步回发时，GridView所在的DOM区域会被重新渲染，之前初始化的DataTables实例会失效，导致表格格式丢失；如果直接重复初始化还会触发控制台报错。

解决方案 #

1. 封装DataTables初始化函数
   先销毁已存在的DataTables实例，再重新初始化，避免重复初始化报错：

   $(document).ready(function() {
       // 页面首次加载时初始化表格
       initializeDataTable();
   });
   
   function initializeDataTable() {
       // 检查是否已存在DataTables实例，存在则销毁
       if ($.fn.DataTable.isDataTable('.myTable')) {
           $('.myTable').DataTable().destroy();
       }
       // 初始化DataTables，可根据需求添加配置
       $('.myTable').DataTable({
           paging: true,
           searching: true,
           ordering: true,
           language: {
               emptyTable: "无可用数据"
           }
       });
   }
   

2. 监听UpdatePanel异步回发完成事件
   借助ASP.NET内置的PageRequestManager，在每次异步回发（比如点击GridView内的操作按钮、分页按钮）结束后，重新初始化DataTables：

   // 监听UpdatePanel异步回发结束事件
   Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
       initializeDataTable();
   });
   

3. 额外注意事项

   • 确保GridView的CssClass属性包含myTable，和初始化代码中的选择器匹配；
   • 如果控制台报Sys is not defined，需确认页面已引入ASP.NET的ScriptManager控件；
   • 若按钮点击后有弹窗、数据绑定等额外逻辑，可在add_endRequest事件中补充处理。

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