<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="App_Themes/TableCSSCode.css" rel="stylesheet" />
<script type="text/javascript">
var iCounter = 0;
$(document).ready(function() {
$('#search').keyup(function(e) {
$("#DetailsData tr:has(td)").hide();
var sSearchTerm = $('#search').val();
if (sSearchTerm.length == 0) {
$("#DetailsData tr:has(td)").show();
return false;
}
$("#DetailsData tr:has(td)").children().each(function() {
var cellText = $(this).text().toLowerCase();
if (cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) {
$(this).parent().show();
iCounter++;
return true;
}
});
e.preventDefault();
})
});
</script>
<div class="jumbotron">
<h1>ASP.NET/JQUARY</h1>
<p class="lead">Searching Table Or Gridview Using jquary</p>
<p></p>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-3 ">
<div class="search-form" style="margin-left:90px">
<div class="form-group has-feedback"> <label for="search" class="sr-only">Search</label> <input type="text" id="search" name="search" class="form-control" placeholder="Search..."> </div>
</div>
</div>
<div class="col-md-12 MyTable">
<table id="DetailsData">
<tbody>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Code</th>
<th>Branch</th>
<th>DOJ</th>
<th>Dept.</th>
<th>Function</th>
<th>Designation</th>
<th>Level</th>
<th>Reprotee</th>
</tr>
<tr>
<td>2070029730</td>
<td>KANCHAN SAHA</td>
<td>31923</td>
<td>KOLKATA</td>
<td>29-Jul-2016</td>
<td>IT</td>
<td>ALL</td>
<td>ASST. MANAGER HUMAN RESOURCES</td>
<td>J III</td>
<td>Mr. Sood(31824)</td>
</tr>
<tr>
<td>2070029731</td>
<td>SSS dddd</td>
<td>31924</td>
<td>KOLKATA</td>
<td>30-Jul-2016</td>
<td>IT</td>
<td>ALL</td>
<td>ASST. MANAGER - ADMIN</td>
<td>J III</td>
<td>Mr. .(31877)</td>
</tr>
<tr>
<td>2070029737</td>
<td>SHANTI JANA</td>
<td>31930</td>
<td>KOLKATA</td>
<td>2-Aug-2016</td>
<td>DIRECTOR</td>
<td>ALL</td>
<td>ASST. MANAGER - ADMIN</td>
<td>ddd</td>
<td>Mr. .(30200)</td>
</tr>
</tbody>
</table>
</div>
</div>
</asp:Content>
Searching Table Data Or Grid Data Using JQuary
This code snippet is for Searching Table Data or Grid Data using Jquary.