asp.net - 在 UpdatePanel 内的 Gridview 中单击 LinkBut​​ton 后，引导数据表不起作用

Question

我有一个 GridView，在 UpdatePanel 内实现了一个引导数据表，并且有两个 LinkBut​​ton（打开和删除）。 加载时

单击任何链接按钮后，引导数据表不起作用。 点击链接按钮后

这是我的 GridView 代码

<asp:UpdatePanel ID="upanelDocReq" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <h6>Uploaded Documents</h6>
      <div class="table-responsive">
         <asp:GridView ID="gvDocuments" DataKeyNames="DocReqID" 
            CssClass="table table-striped dt-responsive nowrap" runat="server"
            EmptyDataText="No document uploaded yet" AutoGenerateColumns="false">
            <Columns>
               <asp:TemplateField HeaderText="Action">
                  <ItemTemplate>
                     <asp:LinkButton ID="lbView" runat="server" 
                        CssClass="btn btn-primary"
                        OnClick="lbView_Click">Open</asp:LinkButton>
                     <asp:LinkButton ID="lbDelete" runat="server" 
                        CssClass="btn btn-danger"
                        OnClick="lbDelete_Click">Delete</asp:LinkButton>
                  </ItemTemplate>
                  <HeaderStyle />
                  <ItemStyle Width="130px"></ItemStyle>
               </asp:TemplateField>
               <asp:BoundField DataField="DocumentDesc" HeaderText="Document">
                  <HeaderStyle />
               </asp:BoundField>
               <asp:BoundField DataField="DateUploaded" HeaderText="Date Upload">
                  <HeaderStyle />
                  <ItemStyle Width="120px"></ItemStyle>
               </asp:BoundField>
            </Columns>
         </asp:GridView>
      </div>
   </ContentTemplate>
</asp:UpdatePanel>

脚本

<script>
    $(document).ready(function() {
        $('#<%=gvDocuments.ClientID%>').prepend($("<thead></thead>")
            .append($("#<%=gvDocuments.ClientID%>")
            .find("tr:first")))
            .DataTable({
                responsive: true,
                order: [],
                searching: false,
                lengthChange: false,
                drawCallback: function(settings) {
                    var pagination = $(this).closest('.dataTables_wrapper')
                        .find('.dataTables_paginate');
                    pagination.toggle(this.api().page.info().pages > 1);
                }
            });
    });   
</script>

我所做的是在 ScriptManager 上添加 ScriptReferences 吗？

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
    <Scripts>
        <asp:ScriptReference Path="~/Content/bootstrap.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap-grid.min.css" />
        <asp:ScriptReference Path="~/Content/bootstrap-reboot.min.css" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css" />
        <asp:ScriptReference Path="~/Scripts/jquery-3.4.1.min.js" />
        <asp:ScriptReference Path="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
        <asp:ScriptReference Path="~/Scripts/bootstrap.bundle.min.js" />
        <asp:ScriptReference Path="~/Scripts/bootstrap.min.js" />
        <asp:ScriptReference Path="~/Scripts/popper.min.js" />
        <asp:ScriptReference Path="~/Scripts/umd/popper.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" />
        <asp:ScriptReference Path="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js" />
    </Scripts>
</asp:ScriptManager>

但是，引导数据表仍然无法正常工作。

标签： asp.nettwitter-bootstrapgridviewdatatableupdatepanel