Hi All,



Now you can search the table using jquery. Here is the code.

The only problem is that if you show the scroll bar, the search woks perfectly but when you scroll up/down you can see all the data .



Here is how it works:

• Name your table as my-table
  
• Search input box:
  
  <label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
  
  
  
  js header code
  
  $(document).ready(function(){
  
  // Write on keyup event of keyword input element
  
  $("#kwd_search").keyup(function(){
  

  // When value of the input is not blank<br/>
  if( $(this).val() != &quot;&quot;)<br/>
  {<br/>
     // Show only matching TR, hide rest of them<br/>
      $(&quot;#my-table tbody&gt;tr&quot;).hide();<br/>
      $(&quot;#my-table td:contains-ci('&quot; + $(this).val() + &quot;')&quot;).parent(&quot;tr&quot;).show();<br/>
      $('.header').parents('tr').show()  //for showing the headers<br/>
     //$('.scrollBar').parents('tr').show()  for showing the search bar<br/>
  

  
  

  }<br/>
  else<br/>
  {<br/>
     // When there is no input or clean again, show everything back<br/>
      $(&quot;#my-table tbody&gt;tr&quot;).show();<br/>
  }<br/>
  

  });
  
  });
  
  // jQuery expression for case-insensitive filter
  
  $.extend($.expr[":"],
  
  {
  
  "contains-ci": function(elem, i, match, array)
  
  {
  

  return (elem.textContent || elem.innerText || $(elem).text() || &quot;&quot;).toLowerCase().indexOf((match[3] || &quot;&quot;).toLowerCase()) &gt;= 0;<br/>
  

  }
  
  });