DataTable не воспроизводит Gridview после события нажатия кнопки

Question

на моей странице, когда моя страница создается, все работает нормально, но когда я нажимаю на кнопку, чтобы отобразить выбранную строку, то мой вид сетки не отображается в виде данных, что мне нужно сделать, чтобы исправить это или что я делаюне так?

мой скрипт

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

Моя сетка

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

при создании моей страницы

Все работает отлично

Но когда я нажимаю кнопку, тогда

Что мне нужно сделать сейчасисправить эту проблему?

Answer 1

после использования большого количества другого кода я не смог найти правильное решение, поэтому я использовал его при загрузке страницы и все работает нормально

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

Answer 2

UpdatePanel обновляет DOM, поэтому любые изменения, внесенные в него с помощью jQuery, теряются.Вам нужно снова позвонить DataTable() после Async PostBack.Вы можете использовать PageRequestManager для этого.

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