Apply Jquery DataTables plugin to ASP GridView

I've used this plugin before in PHP so I thought I'll use it again for my ASP project.

For some reason it doesn't work with my GridView control.

javascript block:

<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 code:

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

Am I doing something wrong or DataTables can't be used for ASP controls?

The problem is that GridView control doesn't add <thead> element but just put the header row into <body> section of generated table whereas the Data Table plugin requires a <thead> section in a table. Try to use following script:

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

P.S. also you can use controls those don't rendering with default layout like Repeater or ListView

Prasad Jadhav

You can add thead, tbody and tfoot tags using GridView Prerender event try this code

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;
  }

}

Don't forget to add the event handler on source page as below

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

Now you can simply call JQuery function as usual to render it

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

Please try below code.

来源：https://stackoverflow.com/questions/8200681/apply-jquery-datatables-plugin-to-asp-gridview

标签

jquery

ASP.NET

jquery-datatables