Google+ Peter Bromberg's .NET Blog | How to Filter (Search) in a Table With jQuery

Peter Bromberg's .NET Blog All Things Programming

How to Filter (Search) in a Table With jQuery

25. October 2013 11:28 by admin in Jquery

Click here for Working Sample

<!DOCTYPE html> 
<html > 
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JQuery Table Search Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.expr[':'].contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$(document).ready(function(){
$('input[name="search"]').keyup(function(){
var searchterm = $(this).val();
if(searchterm.length >2) {
var match = $('tr.data-row:contains("' + searchterm + '")');
var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');
match.addClass('selected');
nomatch.css("display", "none");
} else {
$('tr.data-row').css("display", "");
$('tr.data-row').removeClass('selected');
}
});
});
</script>
<style type="text/css">table {background-color: #FAF3DF;}table tr.data-row {background-color: #fff;}table tr.data-row td.selected-cell {color: #fff;background-color: #660000;}table tr.data-header {background-color: #F1EDE3;border-bottom: solid 2px #fff;font-weight: bold;}table tr.selected {background-color: #FFCC88;} </style></head> <body><p>Search term:<input type="text" name="search" /></p><table cellspacing="4"><tr class="data-header"><td>Contacts</td></tr><tr class="data-row"> <td>Jerald Mickey</td></tr><tr class="data-row"> <td>Minda Carlen</td></tr><tr class="data-row"> <td>Marlene Nida</td></tr><tr class="data-row"> <td>Daysi Cassano</td></tr><tr class="data-row"> <td>Bonny Medford</td></tr><tr class="data-row"> <td>Patria Sciortino</td></tr><tr class="data-row"> <td>Kathaleen Herwig</td></tr><tr class="data-row"> <td>Junior Chamberlin</td></tr><tr class="data-row"> <td>Belkis Fleishman</td></tr><tr class="data-row"> <td>Evangeline Ishee</td></tr><tr class="data-row"> <td>Reyes Newland</td></tr><tr class="data-row"> <td>Eleonore Federico</td></tr><tr class="data-row"> <td>Briana Launius</td></tr><tr class="data-row"> <td>Eula Bernard</td></tr><tr class="data-row"> <td>Albert Palm</td></tr><tr class="data-row"> <td>Zofia Schlachter</td></tr><tr class="data-row"> <td>Donnette Nichols</td></tr><tr class="data-row"> <td>Herta Hile</td></tr><tr class="data-row"> <td>Lurlene Pfeffer</td></tr><tr class="data-row"> <td>Teresita Wasson</td></tr><tr class="data-row"> <td>Milagros Copes</td></tr><tr class="data-row"> <td>Ai Stimac</td></tr><tr class="data-row"> <td>Brigida Rake</td></tr><tr class="data-row"> <td>Alida Paxton</td></tr><tr class="data-row"> <td>Juliann Mattingly</td></tr><tr class="data-row"> <td>Phil Cervantes</td></tr><tr class="data-row"> <td>Lauryn Salgado</td></tr><tr class="data-row"> <td>Glady Lavergne</td></tr><tr class="data-row"> <td>Shawna Koerber</td></tr><tr class="data-row"> <td>Alana Halloway</td></tr></table> </body> </html>

Add comment

  Country flag


Loading