jQuery DataTable 在应用更新面板后不工作那么如何防止呢？

Question

我正在处理 asp.net web 表单。我遇到问题 jQuery 数据表

example

按下搜索按钮以在数据表上显示数据后无法正常工作。

我试着寻找原因，我发现更新面板有问题。

如果我删除更新面板，一切都会正常工作，数据表 jquery 也会正常工作

但是如果我添加更新面板，jQuery 数据表将无法工作。

我添加更新面板以防止回发到服务器以获取下拉列表。

如何使用更新面板同时应用jQuery数据表？

我的代码详情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><%# Eval("id") %></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: [
                    //'copy',
                    'excel',
                    'csv',
                    'pdf'
                    //'print'
                ]
            },
            'copy', 'print' //'csv', 'excel', 'pdf', 
        ]
    });
});

更新帖子

我尝试通过以下代码解决问题：

 <script type="text/javascript"> 
                              var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        UPDATEPANELFUNCTION();
    }                   
                                 }
                                 function UPDATEPANELFUNCTION() {
                                     jQuery(document).ready(function ($) {
                                         $('#example').DataTable({
                                            ///* destroy: true,*/
                                             dom: 'Bfrtip',
                                             buttons: [
                                                 {
                                                     extend: 'collection',
                                                     text: 'Export',
                                                     buttons: [
                                                         //'copy',
                                                         'excel',
                                                         'csv',
                                                         'pdf'
                                                         //'print'
                                                     ]
                                                 },
                                                 'copy', 'print' //'csv', 'excel', 'pdf', 
                                             ]
                                         });
                                     });
                                 }

                                 UPDATEPANELFUNCTION(); 
                             </script>

我收到警告表 id=example can't be reinitialise datatable 那么如何防止显示此警告

Answer 1

您需要注册您的脚本。

例子：

  private void ResetDataTables()
  {
        StringBuilder builder = new StringBuilder();
        builder.Append("UPDATEPANELFUNCTION();");
        ScriptManager.RegisterStartupScript(this, this.GetType(), "UPDATEPANELFUNCTION", builder.ToString(), false);

  }

在

ResetDataTables()

上致电

Page_Load

。