将 Jquery DataTables 插件应用到 ASP GridView

Posted

技术标签:

【中文标题】将 Jquery DataTables 插件应用到 ASP GridView【英文标题】:Apply Jquery DataTables plugin to ASP GridView 【发布时间】:2012-01-02 07:04:41 【问题描述】:

我之前在 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 控件?

【问题讨论】:

感谢您提出这个问题。 【参考方案1】:

问题在于 GridView 控件没有添加 &lt;thead&gt; 元素,而只是将标题行放入生成表的 &lt;body&gt; 部分,而数据表插件需要表中的 &lt;thead&gt; 部分。尝试使用以下脚本:

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

附:您也可以使用那些不使用默认布局呈现的控件,例如 Repeater 或 ListView

【讨论】:

有效!我不认为我完全理解如何,但确实如此。你有一些病态的技能,伙计。谢谢! 感谢这个很棒的答案+解释。这让我很生气。 不要在 $("#Grid").prepend($("").append($(this).find("tr :first"))).dataTa‌​ble();因为如果标记 b4“网格”中已经存在另一个表,则会出现问题。而是使用 $(#Grid) .. 所以像这样使用 $("#Grid").prepend($("").append($("#Grid").find("tr :first"))).dat‌​aTable();【参考方案2】:

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

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();
);

【讨论】:

您使用 .gvv 而不是 .GridView1?? @JoshYates1980 :它只是忘记定义类名。我已经更新了代码【参考方案3】:

请尝试以下代码。

【讨论】:

不要在 $("#Grid").prepend($("").append($(this).find("tr :first"))).dataTable();因为如果标记 b4“网格”中已经存在另一个表,则会出现问题。而是使用 $(#Grid) .. 所以像这样使用 $("#Grid").prepend($("").append($("#Grid").find("tr :first"))).dataTable(); 感谢您的精彩提示 感谢您的精彩提示 除了表格行的条带化和一些杂项之外的所有工作。 “奇数”和“偶数”样式被完全忽略,没有错误。

以上是关于将 Jquery DataTables 插件应用到 ASP GridView的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery DataTables 插件,fnAddData() 是不是将行添加到 html 表格的顶部或底部?

Jquery DataTables 插件 - sAjaxSource

jQuery 插件 (DataTables) 仅在页面刷新时正确加载

jquery.serialize() 无法使用 dataTables 插件从第二页开始工作

JQuery DataTables 服务器端分页

如何从 Datatables jQuery 插件中提取过滤后的数据?