i have added jquery library to my gridview and it was really helpfull. when on page load this datatable show perfectly, but when I change value of dropdown list jquery datatable disapper. in this case, gridview just showing data based on dropdown list parameters value. I follow this tutorial .
link jquery reference:
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
set javascript sintax to gridview:
<script type="text/javascript">
//on page load
$(function () {
$('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
});
</script>
here is my gridview asp.net:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" DataTextField="Name" DataValueField="Name"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="30%" placeholder="select">
</asp:DropDownList>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="table table-striped"
Width="100%" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="Edit" HeaderText="Edit Record" HeaderStyle-Width="10%">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
when I run this page,it worked:
BUT after i tried select one of value of dropdown list, datatable jquery didn't appear any more.
need suggest for this issue and fix this. Thanks
You have to rebind your datatable after postback. It happens now only during load. After every postback rebind the table
This is probably what you are searching for
pageLoad()
will be triggered after every postback
function pageLoad() {
bindGrid();
};
function bindGrid(){
$('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
};
it does require to be on page.
<asp:ScriptManager runat="server" />
A other option instead of pageload is
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindGrid);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.