在 ASP.NET GridView 中实现 JQuery 数据表

Posted 2023-05-08

【中文标题】在 ASP.NET GridView 中实现 JQuery 数据表

【英文标题】：Implement JQuery Datatable in ASP.NET GridView

【发布时间】：2019-08-09 10:53:26

【问题描述】：

我想在 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>