Hello friends, today I will teach you how to show searching in a HTML table with jQuery. This is a very simple and easy code snippet which you can use it in small apps reporting where you want to add fast searching. This ‘Create Live Search in HTML Table’ jquery code is to make simple and fast searching possible, so download it or check out the demo.
PROJECT SCREENSHOT :
Code for this tutorial is very simple.
STEP 1:
First of all you need to create table.
[code]
<div class="form-group"><input id="search" class="form-control pull-right" style="width: 20%;" type="text" placeholder="Type to search table…" /></div>
<table id="mytable" class="table-bordered table pull-right" style="width: 100%;" cellspacing="0">
<thead>
<tr role="row">
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Satou Nao</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Brad Gree</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Wagner Kumar</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Williamson j.</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Salman Khan</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Vinton Cerf</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Naveen Mishra</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Zohair Raza</td>
<td>Engineer</td>
<td>Dubai</td>
<td>30</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
[/code]
STEP 2:
Next step is to include JQUERY.
[code]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.1.0%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/code]
STEP 3:
Last step is to add this Jquery snippet.
[code]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%2F%2F%20Write%20on%20keyup%20event%20of%20keyword%20input%20element%0A%20%24(document).ready(function()%7B%0A%20%24(%22%23search%22).keyup(function()%7B%0A%20%20_this%20%3D%20this%3B%0A%20%2F%2F%20Show%20only%20matching%20TR%2C%20hide%20rest%20of%20them%0A%20%24.each(%24(%22%23mytable%20tbody%20tr%22)%2C%20function()%20%7B%0A%20if(%24(this).text().toLowerCase().indexOf(%24(_this).val().toLowerCase())%20%3D%3D%3D%20-1)%0A%20%20%24(this).hide()%3B%0A%20else%0A%20%20%24(this).show()%3B%0A%20%7D)%3B%0A%20%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/code]
Finally our code is complete and now you can filter records by searching live.
You may want to take a look at the following related posts:
- Easiest Drop Down Menu Using Jquery and CSS3
- Awesome Input Type Text Focus Effects Using CSS
- Add Google Maps on Your Website Tutorial
- Creative HTML Form Example
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Web Designing Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
4. UI / UX Training.