Download Source Code - Searching In Table ASP.NET MVC 5

In this approach we are assuming we have all data loaded on page. If there are many rows and columns we would like to provide search functionality.

Here we are going to create UI just as shown-

For this you need -

 


<p> 

Search term:

<input type="text" name="search" />

</p>

<table cellpadding="0" cellspacing="0" border="2">

<tr class="data-header" style="color:Blue;">

<td>

JQuery Searching - Text 1

</td>

<td>

JQuery Searching - Text 2

</td>

</tr>

<tr class="data-row">

<td>

test string 1 - search me

</td>

<td>

test string 2 - search and sort

</td>

</tr>

<tr class="data-row">

<td>

test string 1 - sort me

</td>

<td>

test string 2 - sort and filter

</td>

</tr>

...

</table>

Now we have search control and page ready then we need to include JQuery Library. I am going to use Google library for JQuery for that add following script in page.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

 

Final step is to add jQuery code :

 

<script type="text/javascript"> 

$(document).ready(function () {

$('input[name="search"]').keyup(function () {

var searchCriteria = $(this).val();

if (searchterm.length > 1) {

var match = $('tr.data-row:contains("' + searchCriteria + '")').show();

var nomatch = $('tr.data-row:not(:contains("' + searchCriteria + '"))').hide();

} else {

$('tr.data-row').show();

}

});

});

<script>

 


Thank You...Please like this article on social site if this worked for you… Coding is fun !!! Isn't it...