Hello friends in this tutorial we are going to see how to search html table data by using simple jquery code without page refresh. Here we will not use any ajax method for search data from server side but we will use pure jquery code for search html table data. Here we write jquery code for search text from html table and based on that it will filter html table row and figure out searching text available in any of the table cells if search query available in any of the table cell then it will display that table row on web page. This type of functionality is very useful into our web application, this is because for filter data from html we have not execute any server side code for filter data and all things we have done on web page. We have write simple jquer code which search character from html table and jquery code check if matched text has been found from table then it will show only that table row and hide other table row.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Search HTML Table Data by using JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:900px;">
<h2 align="center">Search HTML Table Data by using JQuery</h2>
<h3 align="center">Employee Data</h3>
<br /><br />
<div align="center">
<input type="text" name="search" id="search" class="form-control" />
</div>
<br /><br />
<div class="table-responsive" >
<table class="table table-bordered" id="employee_table">
<tr>
<th width="5%">ID</th>
<th width="25%">Name</th>
<th width="35%">Address</th>
<th width="10%">Gender</th>
<th width="20%">Designation</th>
<th width="5%">Age</th>
</tr>
<tr>
<td>175</td>
<td>Ronald D. Colella</td>
<td>1571 Bingamon Branch Road, Barrington, IL 60010</td>
<td>Male</td>
<td>Top executive</td>
<td>32</td>
</tr>
<tr>
<td>174</td>
<td>Martha B. Tomlinson</td>
<td>4005 Bird Spring Lane, Houston, TX 77002</td>
<td>Female</td>
<td>Systems programmer</td>
<td>38</td>
</tr>
<tr>
<td>173</td>
<td>Cameron K. Barnett</td>
<td>2822 River Road, Colorado Springs, CO 80903</td>
<td>Male</td>
<td>Mortgage loan officer</td>
<td>52</td>
</tr>
<tr>
<td>172</td>
<td>James V. Foreman</td>
<td>4881 Adams Drive, Houston, TX 77002</td>
<td>Male</td>
<td>Sports instructor</td>
<td>32</td>
</tr>
<tr>
<td>171</td>
<td>Dallas V. Jones</td>
<td>2672 Broaddus Avenue, Bowling Green, KY 42103</td>
<td>Male</td>
<td>Tractor driver</td>
<td>45</td>
</tr>
<tr>
<td>170</td>
<td>Patricia R. Lohman</td>
<td>2653 Courtright Street, Garrison, ND 58540</td>
<td>Female</td>
<td>Counseling psychologist</td>
<td>24</td>
</tr>
<tr>
<td>169</td>
<td>Lee H. Young</td>
<td>4097 Cambridge Place, Cockeysville, MD 21030</td>
<td>Male</td>
<td>Refractory mason</td>
<td>24</td>
</tr>
<tr>
<td>168</td>
<td>Melina T. Reza</td>
<td>68 Elk Creek Road, Chamblee, GA 30341</td>
<td>Female</td>
<td>Manpower development manager</td>
<td>40</td>
</tr>
<tr>
<td>167</td>
<td>Sandra P. Swain</td>
<td>3563 Wolf Pen Road, San Jose, CA 95134</td>
<td>Female</td>
<td>Mortgage banker</td>
<td>32</td>
</tr>
<tr>
<td>166</td>
<td>Thomas K. Herrman</td>
<td>4342 Despard Street, Atlanta, GA 30331</td>
<td>Male</td>
<td>Scientific photographer</td>
<td>47</td>
</tr>
<tr>
<td>165</td>
<td>Nick M. Gilligan</td>
<td>4951 North Bend River Road, Lexington, KY 40505</td>
<td>Male</td>
<td>Supply manager</td>
<td>42</td>
</tr>
<tr>
<td>164</td>
<td>Ronald S. Keefe</td>
<td>4388 Goff Avenue, Grand Rapids, MI 49508</td>
<td>Male</td>
<td>Landscaping worker</td>
<td>22</td>
</tr>
<tr>
<td>163</td>
<td>William C. Wright</td>
<td>2653 Pyramid Valley Road, Cedar Rapids, IA 52404</td>
<td>Male</td>
<td>Political geographer</td>
<td>33</td>
</tr>
<tr>
<td>162</td>
<td>Jarrod D. Jones</td>
<td>3827 Bingamon Road, Garfield Heights, OH 44125</td>
<td>Male</td>
<td>Manpower development advisor</td>
<td>64</td>
</tr>
<tr>
<td>161</td>
<td>Glenda J. Stewart</td>
<td>3482 Pursglove Court, Rossburg, OH 45362</td>
<td>Female</td>
<td>Cost consultant</td>
<td>28</td>
</tr>
<tr>
<td>8</td>
<td>Charles D. Horst</td>
<td>1636 Walnut Hill Drive
Cincinnati, OH 45202</td>
<td>Male</td>
<td>Financial investigator</td>
<td>29</td>
</tr>
<tr>
<td>7</td>
<td>Antonio J. Forbes</td>
<td>403 Snyder Avenue
Charlotte, NC 28208</td>
<td>Male</td>
<td>Faller</td>
<td>32</td>
</tr>
<tr>
<td>6</td>
<td>Barbra K. Hurley</td>
<td>1241 Canis Heights Drive
Los Angeles, CA 90017</td>
<td>Female</td>
<td>Service technician</td>
<td>26</td>
</tr>
<tr>
<td>5</td>
<td>Clara Gilliam</td>
<td>63 Woodridge Lane
Memphis, TN 38138</td>
<td>Female</td>
<td>Programmer</td>
<td>24</td>
</tr>
<tr>
<td>1</td>
<td>Bruce Tom</td>
<td>656 Edsel Road
Sherman Oaks, CA 91403</td>
<td>Male</td>
<td>Driver</td>
<td>36</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#search').keyup(function(){
search_table($(this).val());
});
function search_table(value){
$('#employee_table tr').each(function(){
var found = 'false';
$(this).each(function(){
if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
{
found = 'true';
}
});
if(found == 'true')
{
$(this).show();
}
else
{
$(this).hide();
}
});
}
});
</script>
Nice Post, Thanks for sharing
ReplyDeleteThanks for sharing
ReplyDeleteThank you so much... very useful search()
ReplyDeleteYou rocks! Love it
ReplyDeletehi hi what if i want to echo a message in-case no results were found
ReplyDeleteThanks. :)
ReplyDeleteThanks. :)
ReplyDeletethanks, this post is very help full
ReplyDeletenice coding .but how to exlude the first row and stick it to the search?
ReplyDeletehi, sir its working but the heading is also deleting
ReplyDeletehow can edit rows ?
ReplyDeleteYour blogs is really very helpfull regarding such trends and technology in programming world,Thanks a lot @webslesson
ReplyDeleteNice coding
ReplyDelete