Hi Joinnes,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Style/demo.css" />
<script type="text/javascript">
$(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
})
</script>
<script type="text/javascript">
$(document).ready(function () {
var gvFileDetails = $("#gvFileDetails").prepend($("<thead></thead>").append($("#gvFileDetails").find("tr:first"))).DataTable();
var gvFileAcc = $("#gvFileAcc").prepend($("<thead></thead>").append($("#gvFileAcc").find("tr:first"))).DataTable();
var gvFileEng = $("#gvFileEng").prepend($("<thead></thead>").append($("#gvFileEng").find("tr:first"))).DataTable();
var gvFileFin = $("#gvFileFin").prepend($("<thead></thead>").append($("#gvFileFin").find("tr:first"))).DataTable();
var gvFileQHSE = $("#gvFileQHSE").prepend($("<thead></thead>").append($("#gvFileQHSE").find("tr:first"))).DataTable();
$('input[type=search]').on("keyup", function () {
// Search only in FileName column i.e. Column 1.
gvFileDetails.column(1).search($(this).val()).draw();
gvFileAcc.column(1).search($(this).val()).draw();
gvFileEng.column(1).search($(this).val()).draw();
gvFileFin.column(1).search($(this).val()).draw();
gvFileQHSE.column(1).search($(this).val()).draw();
var searchTerm = $(this).val();
$(".forHighlight").each(function () {
var searchPattern = new RegExp('(' + searchTerm + ')', 'ig');
$(this).html($(this).text().replace(searchPattern, "<span class = 'highlight'>" + searchTerm + "</span>"));
});
});
});
</script>
<style type="text/css">
body
{
font-family: 'Segoe UI';
font-size: 10pt;
}
.highlight
{
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuOne">
<span class="glyphicon glyphicon-minus"></span>IT Documents </a>
</h4>
</div>
<div id="menuOne" class="panel-collapse collapse in">
<div class="panel-body">
<asp:ScriptManager ID="Script1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="gvFileDetails" AutoGenerateColumns="false" CssClass="table table-bordered"
AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileDetails.PageSize * gvFileDetails.PageIndex) + gvFileDetails.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuTwo">
<span class="glyphicon glyphicon-plus"></span>Accounting Documents </a>
</h4>
</div>
<div id="menuTwo" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileAcc" AutoGenerateColumns="false" CssClass="table table-bordered"
AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileAcc.PageSize * gvFileAcc.PageIndex) + gvFileAcc.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuThree">
<span class="glyphicon glyphicon-plus"></span>Engineering Process Documents
</a>
</h4>
</div>
<div id="menuThree" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileEng" AutoGenerateColumns="false" CssClass="table table-bordered"
AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileEng.PageSize * gvFileEng.PageIndex) + gvFileEng.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuFour">
<span class="glyphicon glyphicon-plus"></span>Finance Documents </a>
</h4>
</div>
<div id="menuFour" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileFin" AutoGenerateColumns="false" CssClass="table table-bordered"
AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileFin.PageSize * gvFileFin.PageIndex) + gvFileFin.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#menuFive">
<span class="glyphicon glyphicon-plus"></span>QHSE Documents </a>
</h4>
</div>
<div id="menuFive" class="panel-collapse collapse">
<div class="panel-body">
<asp:GridView ID="gvFileQHSE" AutoGenerateColumns="false" CssClass="table table-bordered"
AllowPaging="true" PageSize="100" EmptyDataText="No File Uploaded" runat="server">
<Columns>
<asp:TemplateField HeaderText="No" ItemStyle-Width="50px">
<ItemTemplate>
<%#(gvFileQHSE.PageSize * gvFileQHSE.PageIndex) + gvFileQHSE.Rows.Count + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FileName" HeaderText="File Name" ItemStyle-CssClass="forHighlight"
ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="FileDate" HeaderText="Create Date" />
<asp:BoundField DataField="FileExt" HeaderText="Ext File" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("FileName", typeof(string)),
new System.Data.DataColumn("FileDate", typeof(DateTime)),
new System.Data.DataColumn("FileExt",typeof(string)) });
dt.Rows.Add("Test 1", DateTime.Now, ".txt");
dt.Rows.Add("Test 2", DateTime.Now, ".doc");
dt.Rows.Add("Test 3", DateTime.Now, ".xlx");
dt.Rows.Add("Test 4", DateTime.Now, ".ppt");
gvFileDetails.DataSource = dt;
gvFileDetails.DataBind();
gvFileAcc.DataSource = dt;
gvFileAcc.DataBind();
gvFileEng.DataSource = dt;
gvFileEng.DataBind();
gvFileFin.DataSource = dt;
gvFileFin.DataBind();
gvFileQHSE.DataSource = dt;
gvFileQHSE.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As System.Data.DataTable = New System.Data.DataTable()
dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("FileName", GetType(String)), New System.Data.DataColumn("FileDate", GetType(DateTime)), New System.Data.DataColumn("FileExt", GetType(String))})
dt.Rows.Add("Test 1", DateTime.Now, ".txt")
dt.Rows.Add("Test 2", DateTime.Now, ".doc")
dt.Rows.Add("Test 3", DateTime.Now, ".xlx")
dt.Rows.Add("Test 4", DateTime.Now, ".ppt")
gvFileDetails.DataSource = dt
gvFileDetails.DataBind()
gvFileAcc.DataSource = dt
gvFileAcc.DataBind()
gvFileEng.DataSource = dt
gvFileEng.DataBind()
gvFileFin.DataSource = dt
gvFileFin.DataBind()
gvFileQHSE.DataSource = dt
gvFileQHSE.DataBind()
End If
End Sub
Screenshot
