Here I have created sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=btnExport]').on('click', function () {
ExportToExcel('GridView1');
location.reload();
});
});
function ExportToExcel(Id) {
var tab_text = "<table border='2px'><tr>";
var textRange;
var j = 0;
tab = document.getElementById(Id);
var headerRow = $('[id*=GridView1] tr:first');
tab_text += headerRow.html() + '</tr><tr>';
var rows = $('[id*=GridView1] tr:not(:has(th))');
for (j = 0; j < rows.length; j++) {
if ($(rows[j]).css('display') != 'none') {
tab_text = tab_text + rows[j].innerHTML + "</tr>";
}
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, Id + ".xls");
}
else { //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
}
return (sa);
}
</script>
</head>
<body>
</div>
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
<tr style="color: White; background-color: #3AC0F2;">
<th scope="col">
Id
</th>
<th scope="col">
Name
</th>
<th scope="col">
Country
</th>
</tr>
<tr class="SearchRow" style="color: White; background-color: #3AC0F2;">
<th>
<input name="GridView1$ctl07$ctl00" type="text" class="search_textbox" placeholder="Id" />
</th>
<th>
<input name="GridView1$ctl07$ctl01" type="text" class="search_textbox" placeholder="Name" />
</th>
<th>
<input name="GridView1$ctl07$ctl02" type="text" class="search_textbox" placeholder="Country" />
</th>
</tr>
<tr>
<td style="width: 30px;">
1
</td>
<td style="width: 100px;">
John Hammond
</td>
<td style="width: 100px;">
United States
</td>
</tr>
<tr>
<td style="width: 30px;">
2
</td>
<td style="width: 100px;">
Mudassar Khan
</td>
<td style="width: 100px;">
India
</td>
</tr>
<tr>
<td style="width: 30px;">
3
</td>
<td style="width: 100px;">
Suzanne Mathews
</td>
<td style="width: 100px;">
France
</td>
</tr>
<tr>
<td style="width: 30px;">
4
</td>
<td style="width: 100px;">
Robert Schidner
</td>
<td style="width: 100px;">
Russia
</td>
</tr>
</table>
</div>
<iframe id="txtArea1" style="display: none"></iframe>
<br />
<br />
<input type="submit" name="btnExport" value="Export" id="btnExport" />
<script type="text/javascript" src="quicksearch.js"></script>
<script type="text/javascript">
$(function () {
$('.search_textbox').each(function (i) {
$(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
</script>
</body>
</html>
Demo
Aspx
<div>
<%--Note : Use the Same script Here from HTML Code.--%>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
</Columns>
</asp:GridView>
<iframe id="txtArea1" style="display: none"></iframe>
<br />
<br />
<asp:Button ID="btnExport" Text="Export" runat="server" />
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void OnDataBound(object sender, EventArgs e)
{
GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
for (int i = 0; i < GridView1.Columns.Count; i++)
{
TableHeaderCell cell = new TableHeaderCell();
TextBox txtSearch = new TextBox();
txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
txtSearch.CssClass = "search_textbox";
cell.Controls.Add(txtSearch);
row.CssClass = "SearchRow";
row.Controls.Add(cell);
}
GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}
I hope this will help you out.
