Apply Jquery DataTables plugin to ASP GridView

Related searches

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

Responsive GridView Using DataTables Plug-in, For DataTables plug-in to work, the table must be having header row inside the <thead> tag. Yes , they will work. But your selected element through jquery should be the gridview instead of the table element, because it is the gridview that is the container of your data. Furthermore ,there is one thing you should pay attention to. The datatable plugin will sort data according to the first column of your table by default.

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

Using jQuery DataTables with GridView in ASP.Net, Applying jQuery DataTables plugin to GridView Inside the jQuery document ready event handler, the GridView has been applied with jQuery DataTables plugin. The Records per Page DropDownList will be shown if set to True and hidden if set to False. Default is True. The Text and Value for the Records per Page DropDownList. This article covered the very basic functionality of DataTables plug-in to make an HTML table responsive and to integrate the same in ASP GridView so as to make it responsive. DataTables is a very powerful plug-in with a vast variety of functionalities to make our HTML table more attractive and responsive.

Please try below code.    

Asp.net Gridview to Jquery DataTable, JQuery Data Table Is a Jquery Plugin Which Manipulate Your Data such as cool presentation Duration: 11:01 Posted: Feb 22, 2017 In this article you are going to learn how to use Jquery’s datatable plugin with gridview using asp.net and sql server as a back end database. Step 1 :-Now create two table in sql server and populate it with data as shown below:

Gridview with Jquery DataTable, 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 edit mode. We use the jquery ajax function to call our web service by mentioning its URL in the URL option. If the call to the service is successful, then we call DataTable function of the datatables plugin API which converts our table into a multi-purpose table which can help to show data, filter data, sort data, paging of data, hiding / showing columns etc.

Asp.net Gridvew integration with Jquery Datatables, But grid view automatically becomes a table tag full of tr and td once an helper plugin idea that made gridview to work with dataTable plugin. Datatables is a quite popular JQuery based plugin. There are a lot of flavors of Datatables plugins and it supports many major web programming technologies. In this article, I shall be focusing more on how Datatables plugin can be integrated with classic ASP.NET webform se rver side.

Problem with Gridview and dataTable Plugin. If you use DataTable plugin with ASP.NET Gridview control, then you will find that dataTable plugin does not work with ASP.NET Gridview control. Let's see why gridview is not working with dataTable plugin and try to resolve it by writing one helper plugin. Analysis of the Problem

Comments
  • Thanks for asking this question.
  • It works! I don't think I fully understand how, but it does. You got some sick skills there buddy. Thanks!
  • Thanks for this awesome answer + explanation. This was killing me.
  • Don't use "this" in $("#Grid").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTa‌​ble(); coz it gives problems if there is another table already present in the markup b4 "Grid". Instead use $(#Grid) .. So use like this $("#Grid").prepend($("<thead></thead>").append($("#Grid").find("tr:first"))).dat‌​aTable();
  • You use .gvv instead of .GridView1??
  • @JoshYates1980 : Its just forget to define the class name. I have updated the code
  • Don't use "this" in $("#Grid").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable(); coz it gives problems if there is another table already present in the markup b4 "Grid". Instead use $(#Grid) .. So use like this $("#Grid").prepend($("<thead></thead>").append($("#Grid").find("tr:first"))).dataTable();
  • Thank you for the great hint
  • Thank you for the great hint
  • All works except for the striping of the table rows and some misc. the "odd" and "even" styles are completely ignored and there are no errors.