Question

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

链接jquery参考：

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

将javascript sintax设置为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>

这是我的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>

当我运行此页面时，它有效：

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

需要为此问题提出建议并解决此问题。感谢

Answer 1

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

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

每次回发后都会触发

pageLoad()

function pageLoad() { 
         bindGrid();
};

function bindGrid(){
      $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
      "responsive": true,
      "sPaginationType": "full_numbers"
   });
};

确实需要在页面上。

<asp:ScriptManager runat="server" />

另一个选项而不是pageload是

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindGrid);

选定的索引更改下拉列表asp.net更新面板后，Jquery Datatable丢失

1 个答案: