Apply Jquery DataTables plugin to ASP GridView

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


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.    


Comments

  1. Dervishi

    • 2018/6/20

    The problem is that GridView control doesn't add <thead> element but just put the header row into <body> section of generated table whereas 

  2. Orlando

    • 2021/4/27

    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

  3. Stephen

    • 2018/2/6

    The jQuery DataTables plugin requires Table with THEAD and TBODY Tags and hence in order to render GridView with these Tags the 

  4. Durand

    • 2019/8/3

    Applying jQuery DataTables plugin to GridView. Inside the jQuery document ready event handler, the GridView has been applied with jQuery DataTables plugin. The jQuery DataTables plugin has been assigned following properties: bLengthChange – true.

  5. David

    • 2020/1/18

    How to use bootstrap data table to implement search paging sorting in gridview Any Sample Code. How to use DataTable Jquery Plugin in ASP.Net.

  6. Troy

    • 2020/1/30

    I'm using Gridview to display Data from SQL in my content page and I've added all the references related to jQuery DataTables but unfortunately it's not working. All I get is a Gridview with bootstrap styling in it. Below is my ASPX Markup of the content page: 1. 2.

  7. Stephen

    • 2019/7/28

    Apply Jquery DataTables plugin to ASP GridView. Solution: The problem is that GridView control doesn't add <thead> element but just put the header row into 

  8. Amos

    • 2021/1/23

    Im trying to convert existing GridView table to a Boostrap Datatable So far I have this scriptltdiv class34containerfluid34gt ltaspGridView ID34GridView134

  9. Houston

    • 2015/5/26

    make an ASP GridView responsive using jQuery based DataTables plug-in. I'm showing here the basic application of DataTables plug-in.

  10. Barone

    • 2015/11/4

    Applying jQuery DataTables plugin to GridView. Inside the jQuery document ready event handler, a jQuery AJAX call is made to the GetCustomers WebMethod (PageMethod). Inside the Success event handler, the GridView has been applied with jQuery DataTables plugin and the JSON data returned from the WebMethod (PageMethod) is assigned to the data

  11. Mason

    • 2017/3/14

    The purpose of this article is to show how you can implement JQuery DataTables with Asp.net Gridview Control. The jQuery DataTables plugin 

  12. Turner

    • 2017/1/24

    How can I implement jQuery DataTables plugin using C#, ASP.NET, SQL Server side processing with ajax and webservices? Would like to implement a Datatables grid using c# and ASP.NET, but it is difficult to find a working example.

  13. Kaleb

    • 2020/7/29

    The datatable plugin will sort data according to the first column of your table by default. It doesn't matter when your gridview is not in 

  14. Lucian

    • 2017/9/5

    use this: [code] /// /// Adds THeader e TBody tag to gridview /// /// the gridview public static void MakeAccessible(GridView grid) {if (grid.Rows.Count <= 0) return; grid.UseAccessibleHeader = true; grid.HeaderRow.TableSection = TableRowSection.TableHeader; if (grid.ShowFooter) grid.FooterRow.TableSection = TableRowSection.TableFooter;} [/code] call it like this:

  15. Edward

    • 2017/8/29

    How to use Jquery's Datatable plugin with gridview in asp.net webform application · Step 1 · Step 2:- · Step 3:- · Step 4:- · Step 5 · Step 6:- · Step 

Comments are closed.

Recent Posts