DataTable not rendring Gridview after button click event

问题

in my page when my page is creating everything is working fine but when i am clicking on button to show the selected row then my grid view is not rendering as a datatables what i need to do to fix this or what i am doing wrong?

my script

<script type="text/javascript">
        $(function () {
            $('[id*=gvTest]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                "responsive": true,
                "sPaginationType": "full_numbers",


            });
        });
        $(document).ready(function () {

            var table = $('#gvTest').DataTable();
            $('#gvTest tbody').on( 'click', 'tr', function () {
            $(this).toggleClass('selected');
            });


            $('#btnRead').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[0]
                 });               
            });

    } );
    </script>

My Grid

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
   <asp:UpdatePanel ID="updatePanel" runat="server">
     <ContentTemplate>

     <asp:GridView  ID="gvTest" Width="100%" runat="server"  AutoGenerateColumns="False" >
      <Columns>
           <asp:BoundField  DataField="PatientID"  HeaderText="Patient ID" >
           </asp:BoundField>
           <asp:BoundField  DataField="PatientName"  HeaderText="PatientName" >
           </asp:BoundField>
           <asp:BoundField  DataField="Age"  HeaderText="Age" >
           </asp:BoundField>
           <asp:BoundField  HeaderText="Sex" DataField="Sex"  >
           </asp:BoundField>
           <asp:BoundField  HeaderText="Mod" DataField="Modality"  >                                 
      </Columns>
    </asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

when my page is created

Everything Working Fine

But when I click a button then

What do I need to do now to fix this problem ?

回答1:

The UpdatePanel refreshes the DOM, so any changes made to it with jQuery are lost. You need to call DataTable() again after an Async PostBack. You can use the PageRequestManager for that.

<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        createDataTable();
    });

    createDataTable();

    function createDataTable() {
        var table = $('#gvTest').DataTable();
        $('#gvTest tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    }
</script>

回答2:

after using a lots of others code i did'nt get a proper solution so i used this on my page load and its working fine

gvTest.UseAccessibleHeader = true;
//adds <thead> and <tbody> elements
gvTest.HeaderRow.TableSection =
TableRowSection.TableHeader;

来源：https://stackoverflow.com/questions/50294426/datatable-not-rendring-gridview-after-button-click-event

标签

ASP.NET

jquery-plugins

datatables