Hi yinyang205,
Refering the below article i have created sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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" runat="server" AutoGenerateColumns="False" CssClass="footable"
Style="max-width: 500px" AlternatingRowStyle-CssClass="even">
<Columns>
<asp:BoundField DataField="Column1" HeaderText="Column1" ItemStyle-Wrap="false" SortExpression="Column1" />
<asp:BoundField DataField="Column2" HeaderText="Column2" ItemStyle-Wrap="false" SortExpression="Column2" />
<asp:BoundField DataField="Column3" HeaderText="Column3" ItemStyle-Wrap="false" SortExpression="Column3" />
<asp:BoundField DataField="Column4" HeaderText="Column4" ItemStyle-Wrap="false" SortExpression="Column4" />
<asp:BoundField DataField="Column5" HeaderText="Column5" ItemStyle-Wrap="false" SortExpression="Column5" />
<asp:BoundField DataField="Column6" HeaderText="Column6" ItemStyle-Wrap="false" SortExpression="Column6" />
<asp:BoundField DataField="Column7" HeaderText="Column7" ItemStyle-Wrap="false" SortExpression="Column7" />
<asp:BoundField DataField="Column8" HeaderText="Column8" ItemStyle-Wrap="false" SortExpression="Column8" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[8] {
new DataColumn("Column1"),new DataColumn("Column2"),
new DataColumn("Column3"),new DataColumn("Column4"),
new DataColumn("Column5"),new DataColumn("Column6"),
new DataColumn("Column7"),new DataColumn("Column8") });
dt.Rows.Add("A", "B", "C", "D", "E", "F", "G", "H");
dt.Rows.Add("I", "J", "K", "L", "M", "N", "O", "P");
dt.Rows.Add("Q", "R", "S", "T", "U", "V", "W", "X");
GridView1.DataSource = dt;
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[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";
GridView1.HeaderRow.Cells[7].Attributes["data-hide"] = "phone";
//Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(7) { _
New DataColumn("Column1"), New DataColumn("Column2"), _
New DataColumn("Column3"), New DataColumn("Column4"), _
New DataColumn("Column5"), New DataColumn("Column6"), _
New DataColumn("Column7"), New DataColumn("Column8")})
dt.Rows.Add("A", "B", "C", "D", "E", "F", "G", "H")
dt.Rows.Add("I", "J", "K", "L", "M", "N", "O", "P")
dt.Rows.Add("Q", "R", "S", "T", "U", "V", "W", "X")
GridView1.DataSource = dt
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(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"
GridView1.HeaderRow.Cells(7).Attributes("data-hide") = "phone"
'Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub
Screenshot
