Menu
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?
255
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();
});
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
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
