when use update panel jquery datatable not working so how to solve issue ?
Ahmed Salah Abed Elaziz
390
Reputation points
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',
]
});
});
Sign in to answer