选定的索引更改下拉列表asp.net更新面板后，Jquery Datatable丢失 [英] Jquery Datatable lost after selected index change dropdownlist asp.net update panel

问题描述

我已经将jquery库添加到我的gridview中，这真的很有帮助。当页面上加载此数据表显示完美，但当我更改下拉列表的值时jquery datatable disapper。在这种情况下，gridview只显示基于下拉列表参数值的数据。我按照

但是在我尝试选择下拉列表中的一个值之后，数据表jquery不再出现了。

需要针对此问题提出建议并解决此问题。谢谢

解决方案

您必须在回发后重新绑定数据表。它现在只在加载期间发生。每次回发后重新绑定表格

这可能就是你要搜索的内容

<$每次回发后都会触发c $ c> pageLoad（）

  function pageLoad（）{
 bindGrid（）; 
}; 
 
函数bindGrid（）{
 $（'[id * = GridView1]'）。prepend（$（< thead>< / thead>）。append（$（这个）.find（tr：first）））。DataTable（{
responsive：true，
sPaginationType：full_numbers
}）; 
}; 
  

它确实需要在页面上。

 < asp：ScriptManager runat =server/> 
  

另一个选项而不是pageload是

  Sys.WebForms.PageRequestManager.getInstance（）add_endRequest（bindGrid）。 
  

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

这篇关于选定的索引更改下拉列表asp.net更新面板后，Jquery Datatable丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！