將Jquery DataTables插件應用於ASP GridView

Question

我以前在PHP中使用過此插件，所以我想我會再次使用它來進行ASP項目。

由於某種原因，它不適用於我的GridView控件。

javascript塊：

<link type="text/css" href="../scripts/demo_table.css" rel="stylesheet" />  

    <script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $(".gvv").dataTable();
        });
        </script>

Gridview代碼：

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="Prop_No" DataSourceID="testtt" CssClass="gvv">

我做錯了什么或DataTables不能用於ASP控件？

Answer 1

問題是GridView控件不添加<thead>元素，只是將標題行放入生成的表的<body>部分，而數據表插件需要表中的<thead>部分。 嘗試使用以下腳本：

$(function () {
    $(".gvv").prepend( $("<thead></thead>").append( $(this).find("tr:first") ) ).dataTable();
});

PS你也可以使用那些不使用Repeater或ListView等默認布局渲染的控件

Answer 2

您可以使用GridView Prerender事件添加thead ， tbody和tfoot標記嘗試此代碼

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
  GridView1.DataSource = Sample.GetData();
  GridView1.DataBind();

  if (GridView1.Rows.Count > 0) {
   //This replaces <td> with <th> and adds the scope attribute
   GridView1.UseAccessibleHeader = true;

   //This will add the <thead> and <tbody> elements
   GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

   //This adds the <tfoot> element. 
   //Remove if you don't have a footer row
   GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
  }

}

不要忘記在源頁面上添加事件處理程序，如下所示

<asp:GridView ID="GridView1" runat="server" CssClass="gvv"
      OnPreRender="GridView1_PreRender">
</asp:GridView>

現在你可以像往常一樣簡單地調用JQuery函數來渲染它

$(document).ready(function () {
    $(".gvv").dataTable();
});

Answer 3

請嘗試下面的代碼。

在此輸入圖像描述

將Jquery DataTables插件應用於ASP GridView

問題描述

3 個解決方案

解決方案1
38 已采納 2011-11-20 12:54:48

解決方案2
15 2012-08-22 11:49:29

解決方案3
1 2014-08-18 12:18:10

將Jquery DataTables插件應用於ASP GridView

問題描述

3 個解決方案

解決方案1 38 已采納 2011-11-20 12:54:48

解決方案2 15 2012-08-22 11:49:29

解決方案3 1 2014-08-18 12:18:10

解決方案1
38 已采納 2011-11-20 12:54:48

解決方案2
15 2012-08-22 11:49:29

解決方案3
1 2014-08-18 12:18:10