按钮单击事件后 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锚事件不起作用,并返回加载资源失败
Coffeescript - 单击后React setState不呈现