jQuery DataTable not working after apply update panel so How to prevent that?

Question

I working on asp.net web forms . I face issue jQuery data table example not working after press search button for display data on data table.

I try to search for reason I found that update panel is problem .

IF I remove update panel every thing will working and data table jquery will working

but if I add update panel jQuery data table will not working .

I add update panel to prevent post back to server for drop down list .

How to use update panel and on same time apply jQuery data table ?

my code details aspx page

    <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>

on jquery function

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

Updated post

I try to solve issue by code below :

 <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>

i get warning table id=example can't be reintialise datatable so how to prevent this warning from display

Answer 1

You need to register your script.

Example:

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

  }

Call the ResetDataTables() on Page_Load.