Hi umiiiiiii,
I have modified your code. Refer the below sample. Problem is not with procedure problem is with jquery code.
You are passing $('[FName*=GridView1]').footable(); That should be $('[id*=GridView1]').footable(); and also missing the below line.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1]').footable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="FName" HeaderText="First Name" ItemStyle-Font-Italic="true"
ItemStyle-Font-Bold="true" ItemStyle-Font-Size="14px" HeaderStyle-Font-Size="17px" />
<asp:BoundField DataField="LName" HeaderText="Last Name" ItemStyle-Font-Bold="true"
ItemStyle-Font-Italic="true" ItemStyle-Font-Size="14px" HeaderStyle-Font-Size="17px" />
<asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-Font-Bold="true" ItemStyle-Font-Size="14px"
ItemStyle-Font-Italic="true" HeaderStyle-Font-Size="17px" />
<asp:BoundField DataField="HAddress" HeaderText="Address" ItemStyle-Font-Bold="true"
ItemStyle-Font-Size="14px" HeaderStyle-Font-Size="17px" ItemStyle-Font-Italic="true" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Font-Bold="true" ItemStyle-Font-Size="14px"
HeaderStyle-Font-Size="17px" ItemStyle-Font-Italic="true" />
<asp:BoundField DataField="PhoneNo" HeaderText="Phone Number" ItemStyle-Font-Bold="true"
ItemStyle-Font-Size="14px" HeaderStyle-Font-Size="17px" ItemStyle-Font-Italic="true" />
<asp:BoundField DataField="CreatedOn" HeaderText="Date Applied" ItemStyle-Font-Bold="true"
DataFormatString="{0:dd/MM/yy}" ItemStyle-Font-Size="14px" HeaderStyle-Font-Size="17px"
ItemStyle-Font-Italic="true" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string conn = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(conn);
SqlCommand com = new SqlCommand();
con.Open();
// Create a object of SqlCommand class
com.CommandType = CommandType.StoredProcedure;
com.CommandText = "fetchgriddata";
com.Connection = con;
GridView1.EmptyDataText = "No Records Found";
GridView1.DataSource = com.ExecuteReader();
GridView1.DataBind();
//Attribute to show the Plus Minus Button.
GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";
//Attribute to hide column in Phone.
GridView1.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[3].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
Screenshot
