when use update panel jquery datatable not working so how to solve issue ?

Ahmed Salah Abed Elaziz 85 Reputation points
2023-02-26T01:11:40.55+00:00

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="col-lg-2">
                                        <div class="form-group">
                                            <label class="form-control-label" for="PrintServer">Print Server</label>
                                            <asp:DropDownList ID="dropPrinters" class="form-control" AutoPostBack="true" autocomplete="off"  runat="server" OnSelectedIndexChanged="dropPrinters_SelectedIndexChanged"></asp:DropDownList>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <label class="form-control-label" for="BranchName">Branch Name</label>
                                            <asp:DropDownList ID="dropBranches" class="form-control" autocomplete="off"  runat="server" AutoPostBack="true" OnSelectedIndexChanged="dropBranches_SelectedIndexChanged"></asp:DropDownList>
                                        </div>
                                    </div>
</div>
<div class="col-lg-2">
                                             <div class="form-group">
                                             <button type="button" class="btn btn-primary my-4" id="btnSearch"  runat="server" onserverclick="Search_Click" >Search</button>
                                                 <br />
                                                  <button type="button"  class="btn btn-primary my-4" id="PrintAdc"   runat="server" onserverclick="Print_Click">Print</button>
                                                 </div>
                                             <br />
                                          
                                                 </div>

<div  id="BSPanel" runat="server">
                                 
                <div class="col-xl-1 order-xl-1">
                </div>
                            <hr class="my-4 d-none" id="PSline" runat="server" />
                            <div class="pl-lg-4 d-none"   id="PSdiv" runat="server">
                                <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>
                                 
                            </div>
                            <div class="pl-lg-4">
                            <div class="row">
                                       <div class="col-lg-2">

                                  </div>
                                       <div class="col-lg-2">
                                  </div>
                                    
                                     </div>
                                </div>
                        </div>
 </ContentTemplate> 
                                    </asp:UpdatePanel> 
 </form>
on aspx.cs page

protected void Search_Click(object sender, EventArgs e)
        {
         
           
            DataTable dt;

            dt = busiObj.DisplayAllSearchData(dropBranches.SelectedItem.Value);
            if (dt.Rows.Count > 0)
            {

                repPSStatus.DataSource = dt;
                repPSStatus.DataBind();

                PSline.Attributes.Remove("class");
                PSdiv.Attributes.Remove("class");
            

            }
          
        }
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', 
        ]
    });
});
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
1,324 questions
ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
464 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
7,554 questions
{count} votes