将Jquery DataTables插件应用于ASP GridView

我以前在PHP中使用过此插件,所以我想我会再次使用它来进行ASP项目。

由于某种原因,它不适用于我的GridView控件。

javascript块:

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

Gridview代码:

  

我做错了什么或DataTables不能用于ASP控件?

问题是GridView控件不添加

元素,只是将标题行放入生成的表的部分,而数据表插件需要表中的

部分。 尝试使用以下脚本:

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

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

您可以使用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  with  and adds the scope attribute GridView1.UseAccessibleHeader = true; //This will add the  and  elements GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; //This adds the  element. //Remove if you don't have a footer row GridView1.FooterRow.TableSection = TableRowSection.TableFooter; } } 

并且不要忘记在源页面上添加事件处理程序,如下所示

   

现在你可以像往常一样简单地调用JQuery函数来渲染它

   

请尝试下面的代码。

在此处输入图像描述

在此处输入图像描述