ASP.NET Web Forms中UpdatePanel与jQuery DataTable兼容问题及警告消除

问题背景 #

开发ASP.NET Web Forms项目时，ID为example的jQuery DataTable在点击搜索按钮后无法正常工作。排查发现是UpdatePanel导致的——移除UpdatePanel后DataTable功能正常，但需要保留UpdatePanel避免DropDownList触发整页回发。

ASPX页面代码 #

<form id="ADCStatus" runat="server">
   <asp:UpdatePanel ID="updatepnl" runat="server"> 
         <ContentTemplate> 
            <div class="row">
                <div class="table-responsive">
                    <table class="display" id="example">
                        <thead>
                            <tr>
                                <th>Branch Code</th>
                                <th>Entred Datetime</th>
                                <th>Order Type</th>
                                <th>Printer_name</th>
                                <th>Status</th>
                                <th>id</th>
                                <th>StatusCheck</th>
                            </tr>
                        </thead>
                        <tbody>
                            <asp:Repeater runat="server" ID="repPSStatus">
                                <ItemTemplate>
                                    <tr>
                                        <td><%# Eval("BranchCode") %></td>
                                        <td><%# Eval("EntredDatetime") %></td>
                                        <td><%# Eval("OrderType") %></td>
                                        <td><%# Eval("Printer_name") %></td>
                                        <td><%# Eval("Status") %></td>
                                        <td><asp:Label Id="LblId" runat="server" Text='<%# Eval("id") %>'></asp:label></td>
                                        <td class="GridCentre" style="width:20px;">  <asp:CheckBox id="chkSel" runat="server" Checked=false/> </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>
                        </tbody>
                    </table>
                </div>
            </div>
         </ContentTemplate> 
   </asp:UpdatePanel> 
</form>

初始jQuery代码 #

$(document).ready(function () {
    $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'excel',
                    'csv',
                    'pdf'
                ]
            },
            'copy', 'print'
        ]
    });
});

尝试的解决方案及问题 #

尝试通过PageRequestManager的endRequest事件重新初始化DataTable，但出现警告：table id=example can't be reinitialise datatable，原因是UpdatePanel回发后，原DataTable实例未销毁，重复初始化导致冲突。

解决方法 #

核心思路是先销毁已存在的DataTable实例，再重新初始化，避免重复初始化的警告。修正后的代码如下：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        initDataTable();
    }                   
}

function initDataTable() {
    // 销毁已存在的DataTable实例
    var existingTable = $('#example').DataTable();
    if (existingTable) {
        existingTable.destroy();
    }
    
    // 重新初始化DataTable
    $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'excel',
                    'csv',
                    'pdf'
                ]
            },
            'copy', 'print'
        ]
    });
}

// 页面首次加载时初始化DataTable
initDataTable();

说明 #

1. 实例销毁：每次UpdatePanel异步回发完成后，先通过$('#example').DataTable()获取已存在的实例，调用destroy()方法销毁，清除原有的DataTable绑定和事件。
2. 重新初始化：销毁完成后重新初始化DataTable，确保异步回发后的表格能正常使用搜索、导出等功能。
3. 首次加载：页面初始加载时直接调用initDataTable()完成首次初始化。

注意事项 #

• 确保jQuery、DataTable及相关插件的脚本引用在UpdatePanel外部，避免异步回发后脚本丢失。
• 如果表格结构在异步回发后发生变化，销毁再初始化能确保DataTable正确绑定新的DOM元素。

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