13

我以前在 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>

网格视图代码：

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

我做错了什么还是 DataTables 不能用于 ASP 控件？

4

3 回答 3

39

问题是 GridView 控件不添加<thead>元素，只是将标题行放入<body>生成表的部分，而数据表插件需要表<thead>中的部分。尝试使用以下脚本：

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

PS 你也可以使用那些不以默认布局呈现的控件，如 Repeater 或 ListView

于 2011-11-20T12:54:48.963 回答
17

您可以使用 GridView Prerender 事件添加和thead标记尝试此代码tbodytfoot

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();
});
于 2012-08-22T11:49:29.030 回答
1

请尝试以下代码。    

在此处输入图像描述

在此处输入图像描述

于 2014-08-18T12:18:10.160 回答