Hi ahmadsubuhanl...,
I didn't find any issue in your code.
Check the browser console and let us know if any error. Also make sure all the required CSS and JS files are loaded.
I only removed the head tag from content page.
Here is the modified code.
Master Page
<!DOCTYPE html>
<html>
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../assets/css/main.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body class="container-fluid">
<form id="form1" runat="server">
<div>
<!-- Wrapper -->
<div id="wrapper">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<!-- Here form-->
</asp:ContentPlaceHolder>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Search -->
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Search" />
</form>
</section>
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="webform1.aspx">Employee</a></li>
<li><a href="webform2.aspx">Gridview</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/browser.min.js"></script>
<script src="../assets/js/breakpoints.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</div>
</form>
</body>
</html>
Content Page
<%@ Page Title="" Language="VB" MasterPageFile="~/mainNew.master" AutoEventWireup="false" CodeFile="WebForm2.aspx.vb" Inherits="WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://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>
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<p><strong>Gridview</strong> by Gridview</p>
</header>
<!-- Content -->
<section>
<!-- Form -->
<form method="post" action="#">
<div class="row gtr-uniform">
<div class="col-12 col-12-xsmall">
<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="false"
Style="max-width: 900px">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Customer Name" />
<asp:BoundField DataField="Id" HeaderText="Customer Id" />
<asp:BoundField DataField="Country" HeaderText="Country" />
<asp:BoundField DataField="Salary1" HeaderText="Salary1" />
<asp:BoundField DataField="Salary2" HeaderText="Salary2" />
<asp:BoundField DataField="Salary3" HeaderText="Salary3" />
<asp:BoundField DataField="Salary11" HeaderText="Salary11" />
<asp:BoundField DataField="Salary22" HeaderText="Salary22" />
<asp:BoundField DataField="Salary33" HeaderText="Salary33" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</section>
</div>
</div>
</asp:Content>
Code
Imports System.Data
Partial Class WebForm2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(9) {
New DataColumn("Id"),
New DataColumn("Name"),
New DataColumn("Country"),
New DataColumn("Salary"),
New DataColumn("Salary1"),
New DataColumn("Salary2"),
New DataColumn("Salary3"),
New DataColumn("Salary11"),
New DataColumn("Salary22"),
New DataColumn("Salary33")})
dt.Rows.Add(1, "John Hammond", "United States", 70000, 1000, 2000, 300)
dt.Rows.Add(2, "Mudassar Khan", "India", 40000, 1000, 2000, 300, 1000, 2000, 300)
dt.Rows.Add(3, "Suzanne Mathews", "France", 30000, 1000, 2000, 300, 1000, 2000, 300)
dt.Rows.Add(4, "Robert Schidner", "Russia", 50000, 1000, 2000, 300, 1000, 2000, 300)
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(3).Attributes("data-hide") = "phone"
GridView1.HeaderRow.Cells(4).Attributes("data-hide") = "phone"
'Adds THEAD and TBODY to GridView.
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub
End Class
Screenshot
