Apply Jquery DataTables plugin to ASP GridView

Question

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?

Thanks for asking this question.

strider
– strider

2013-10-26 21:25:05 +00:00
Commented Oct 26, 2013 at 21:25 — strider
– strider, Commented Oct 26, 2013 at 21:25

IUnknown · Accepted Answer · 2011-11-20 13:29:28Z

39

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

edited Nov 20, 2011 at 13:29

answered Nov 20, 2011 at 12:54

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

strider Over a year ago

It works! I don't think I fully understand how, but it does. You got some sick skills there buddy. Thanks!

PeonProgrammer Over a year ago

Thanks for this awesome answer + explanation. This was killing me.

Gk_999 Over a year ago

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

squaleLis · Accepted Answer · 2019-02-27 12:26:01Z

17

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

edited Feb 27, 2019 at 12:26

squaleLis

6,5242 gold badges25 silver badges32 bronze badges

answered Aug 22, 2012 at 11:49

Prasad Jadhav

5,27416 gold badges65 silver badges81 bronze badges

2 Comments

JoshYates1980 Over a year ago

You use .gvv instead of .GridView1??

Sunil Acharya Over a year ago

@JoshYates1980 : Its just forget to define the class name. I have updated the code

Nimesh · Accepted Answer · 2014-08-18 12:25:06Z

1

Please try below code.

enter image description here

edited Aug 18, 2014 at 12:25

answered Aug 18, 2014 at 12:18

Nimesh

3,6901 gold badge30 silver badges37 bronze badges

2 Comments

Gk_999 Over a year ago

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

MC9000 Over a year ago

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.

Collectives™ on Stack Overflow

Apply Jquery DataTables plugin to ASP GridView

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related