在 ASP.NET GridView 中实现 JQuery 数据表 [英] Implement JQuery Datatable in ASP.NET GridView
问题描述
我想在 ASP.NET GridView 中使用JQuery 数据表".
I want to use "JQuery Datatable" with ASP.NET GridView.
我尝试了一些我发现的东西,但没有用.
I tried something i found, but it didn't work.
网格视图 -
<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 中添加引用.
i am adding references in GridView when i use.
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.
So, How can i implement Jquery DataTable in ASP.NET GridView.
推荐答案
这几行代码足以让它工作.您不需要预渲染事件.只需在 These few lines are all you need to get it working. You don't need the prerender event. Just bind in 背后的代码 更新 如果您在 UpdatePanel 中使用 DataTable,请使用以下 javascript 以确保在异步回发后正确绑定. If you are using a DataTable inside an UpdatePanel, use the following javascript to ensure proper binding after an Async PostBack. 这篇关于在 ASP.NET GridView 中实现 JQuery 数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!IsPostBack
检查中绑定 Page_Load
.我确实向 GridView
添加了 RowDataBound
事件以添加 和
部分以编程方式而不是使用 jQuery.
Page_Load
in the IsPostBack
check. I did add a RowDataBound
event to the GridView
to add the <thead>
and <tbody>
sections programatically rather than with jQuery.<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;
}
}
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
createDataTable();
});
createDataTable();
function createDataTable() {
$('#<%= GridView1.ClientID %>').DataTable();
}
</script>
登录
关闭