在 ASP.NET GridView 中实现 JQuery 数据表
Posted
技术标签:
【中文标题】在 ASP.NET GridView 中实现 JQuery 数据表【英文标题】:Implement JQuery Datatable in ASP.NET GridView 【发布时间】:2018-09-01 18:57:47 【问题描述】:我想在 ASP.NET GridView 中使用“JQuery 数据表”。
我尝试了一些我发现的东西,但是没有用。
GridView -
<asp:GridView ID="gridViewTasks" runat="server" AutoGenerateColumns="false" CssClass="table table-striped table-bordered dt-responsive nowrap" Width="100%">
<Columns>
<asp:BoundField DataField="task_id" HeaderText="TaskID" Visible="false" />
<asp:BoundField DataField="task_description" HeaderText="Task Name" />
<asp:BoundField DataField="task_detail" HeaderText="Task Detail" Visible="false" />
<asp:BoundField DataField="task_createdate" HeaderText="Create Date" />
<asp:BoundField DataField="task_targetdate" HeaderText="Target Date" />
<asp:BoundField DataField="task_isReaded" HeaderText="Task Read" Visible="false" />
<asp:BoundField DataField="product_id" HeaderText="ProductID" Visible="false" />
<asp:BoundField DataField="product_name" HeaderText="Product" />
<asp:BoundField DataField="status_id" HeaderText="StatusID" Visible="false" />
<asp:BoundField DataField="status_name" HeaderText="Status" />
<asp:BoundField DataField="severity_id" HeaderText="SeverityID" Visible="false" />
<asp:BoundField DataField="severity_name" HeaderText="Severity" />
<asp:BoundField DataField="user_masterID" HeaderText="MasterID" Visible="false" />
<asp:BoundField DataField="gorevi_veren" HeaderText="Master" />
<asp:BoundField DataField="user_slaveID" HeaderText="SlaveID" Visible="false" />
<asp:BoundField DataField="görevi_alan" HeaderText="Slave" />
<asp:BoundField DataField="task_score" HeaderText="Score" />
</Columns>
</asp:GridView>
JavaScript -
1
$(document).ready( function ()
$('#gridViewTasks').DataTable(); );
2
$(document).ready( function ()
$("#gridViewTasks").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).DataTable() ; );
我使用的脚本和 CSS -
<script src="jquery-1.9.1.min.js"></script>
<link href="jquery.dataTables.min.css" rel="stylesheet" />
<script src="jquery.dataTables.min.js"></script>
我也尝试了 girdView_PreRender 函数
我在使用时在 GridView 中添加引用。
protected void GridView1_PreRender(object sender, EventArgs e)
// You only need the following 2 lines of code if you are not
// using an ObjectDataSource of SqlDataSource
gridViewTasks.DataSource = Sample.GetData();
gridViewTasks.DataBind();
if (gridViewTasks.Rows.Count > 0)
//This replaces <td> with <th> and adds the scope attribute
gridViewTasks.UseAccessibleHeader = true;
//This will add the <thead> and <tbody> elements
gridViewTasks.HeaderRow.TableSection = TableRowSection.TableHeader;
//This adds the <tfoot> element.
//Remove if you don't have a footer row
gridViewTasks.FooterRow.TableSection = TableRowSection.TableFooter;
代码隐藏 - 我正在使用 Linq to SQL
var sorgu = from gorev in db.Tasks
join ga in db.Users on gorev.user_slaveID equals ga.user_id
join gv in db.Users on gorev.user_masterID equals gv.user_id
join product in db.Products on gorev.product_id equals product.product_id
join severity in db.Severities on gorev.severity_id equals severity.severity_id
join status in db.Status on gorev.status_id equals status.status_id
select new
gorev.task_id,
gorev.task_description,
gorev.task_detail,
gorev.task_createdate,
gorev.task_targetdate,
gorev.task_isReaded,
product.product_id,
product.product_name,
status.status_id,
status.status_name,
severity.severity_id,
severity.severity_name,
gorev.user_masterID,
gorevi_veren = gv.user_username,
gorev.user_slaveID,
görevi_alan = ga.user_username,
gorev.task_score
;
gridViewTasks.DataSource = sorgu;
gridViewTasks.DataBind();
那么,我如何在 ASP.NET GridView 中实现 Jquery DataTable。
【问题讨论】:
【参考方案1】:这几行就是让它工作所需的全部内容。您不需要 prerender 事件。只需在IsPostBack
检查中绑定Page_Load
。我确实向GridView
添加了一个RowDataBound
事件,以编程方式而不是使用jQuery 添加<thead>
和<tbody>
部分。
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"></asp:GridView>
<script type="text/javascript">
$(document).ready(function ()
$('#<%= GridView1.ClientID %>').DataTable();
);
</script>
后面的代码
protected void Page_Load(object sender, EventArgs e)
//check for a postback
if (!Page.IsPostBack)
//bind the gridview data
GridView1.DataSource = source;
GridView1.DataBind();
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
//check if the row is the header row
if (e.Row.RowType == DataControlRowType.Header)
//add the thead and tbody section programatically
e.Row.TableSection = TableRowSection.TableHeader;
更新
如果您在 UpdatePanel 中使用 DataTable,请使用以下 javascript 以确保在 Async PostBack 之后正确绑定。
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function ()
createDataTable();
);
createDataTable();
function createDataTable()
$('#<%= GridView1.ClientID %>').DataTable();
</script>
【讨论】:
成功了。感谢您的帮助。但是,有些事情我并不完全理解。你能简要解释一下吗? 1-) .ClientID 是什么?我们为什么使用它? 2-) 为什么我们使用 RowDataBound 事件? 1) aspnet 可以重命名客户端控件的 ID,因此gridViewTasks
可能变为 PlaceHolder
_GridView1. If that happens then
$("#gridViewTasks")` 将不起作用,因为该 ID 确实不存在。使用 ClientID
将确保您在客户端使用正确的 ID。
2) 在这种情况下,RowDataBound 事件旨在将<thead>
和<tbody>
添加到默认情况下不存在的gridview。它取代了您的$("#gridViewTasks").prepend( $("<thead></thead>").append( $(this).find("tr:first")
。但如果你想使用 jQuery 方法添加它们,你可以删除它。
好的。太感谢了。最后,你知道我是如何在 Jquery DataTable 中添加 Excel、Print 等按钮的吗?如果你知道,可以分享给我吗?
对不起,我不知道。【参考方案2】:
试试这个,它会根据你的需要工作。
<div class="table-responsive">
<asp:GridView ID="gvExample" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%-- Binding Expression--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
调用必要的 CSS(bootstrap.css, font-awesome.css..etc)
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
调用必要的脚本(bootstrap.js, jquery.js ..etc)
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- jQuery Data Tables CDN -->
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
<!-- Bootstrap Data Tables JS -->
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" type="text/javascript" charset="utf8"></script>
然后在下面添加这个脚本
<script>
$(document).ready(function ()
$('#<%= gvExample.ClientID%>').prepend($("<thead></thead>").append($("#<%= gvExample.ClientID%>").find("tr:first"))).DataTable(
stateSave: true,
);
);
</script>
【讨论】:
以上是关于在 ASP.NET GridView 中实现 JQuery 数据表的主要内容,如果未能解决你的问题,请参考以下文章
带有 jQuery DataTables 和服务器端数据加载的 ASP.Net Webforms GridView
带有复选框控件的 ASP.Net GridView 和 Jquery dataTable
ASP.NET Gridview 分页器样式中的 C# Bootstrap 分页?
第一次打开 jquery 对话框时出现奇怪的问题(在 asp.net gridview 中)