我想将“JQuery Datatable”与 ASP.NET GridView 一起使用。
我尝试了一些我发现的东西,但它没有用。
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。
最佳答案
这几行就是让它工作所需的全部内容。您不需要 prerender 事件。只需绑定(bind) Page_Load
在 IsPostBack
查看。我确实添加了 RowDataBound
事件到GridView
添加 <thead>
和 <tbody>
部分以编程方式而不是使用 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;
}
}
更新
如果您在 UpdatePanel 中使用 DataTable,请使用以下 javascript 来确保在 Async PostBack 之后正确绑定(bind)。
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
createDataTable();
});
createDataTable();
function createDataTable() {
$('#<%= GridView1.ClientID %>').DataTable();
}
</script>
关于asp.net - 在 ASP.NET GridView 中实现 JQuery 数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49443894/