按钮单击事件后 DataTable 不呈现 Gridview

Posted

技术标签:

【中文标题】按钮单击事件后 DataTable 不呈现 Gridview【英文标题】:DataTable not rendring Gridview after button click event 【发布时间】:2018-10-21 23:53:00 【问题描述】:

在创建页面时,一切正常,但是当我单击按钮以显示所选行时,我的网格视图不会呈现为数据表。我需要做什么来解决这个问题或我做错了什么?

我的脚本:

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

当我的页面被创建时:

一切正常,但是当我点击一个按钮时,就会发生这种情况:

我现在需要做什么来解决这个问题?

【问题讨论】:

【参考方案1】:

UpdatePanel 刷新 DOM,因此使用 jQuery 对其所做的任何更改都将丢失。您需要在异步回发之后再次调用DataTable()。你可以使用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>

【讨论】:

【参考方案2】:

解决此问题的最佳方法是在 pageLoad 函数中实现它。 在这种情况下,我使用了 Gridview:

function pageLoad() 
    $("<thead></thead>").append($("#grvPast tr:first")).prependTo($("#grvPast"));
    $('#grvPast').dataTable();

【讨论】:

【参考方案3】:

在使用了很多其他代码后,我没有得到合适的解决方案,所以我在页面加载时使用了它,它工作正常

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

【讨论】:

以上是关于按钮单击事件后 DataTable 不呈现 Gridview的主要内容,如果未能解决你的问题,请参考以下文章

单击时的DataTable锚事件不起作用,并返回加载资源失败

如何在单击按钮时使用参数更新 DataTable?

Coffeescript - 单击后React setState不呈现

primefaces datatable 怎么让footer固定

添加jquery键盘后,jquery按钮单击事件不起作用

通过单击另一个组件中的按钮,react-native重新呈现组件