JavaScript, jquery

Jquery live custom search in table view


Here is some simple live searching tips tat you may implement easily.

table structure

<table id=”content_table” >

<thead>

<tr>…</tr>

<tr>…</tr>

<tr>…</tr>

</thead>

<tbody>

<tr>…</tr>

<tr>…</tr>

<tr>…</tr>

</tbody>

</table>

just create table structure with some ID, here below i have made some screen shot hope you guys will get it he he …..:D

Code :

(function($) {
$(document).ready( function() {
var _val = ”;
$(‘#q’).live(‘keyup’, function(){
_q = $(this).val();
$(‘#content_table tbody tr’).each(function(){
var _tr = this;
$(this).find(‘td’).each(function(){
_val += $(this).text()+’ ‘;
})
_val = _val.toLowerCase();
_data = _val.search(_q);
if(_data > -1){
console.log(‘found here’);
$(_tr).fadeIn();
}else{
$(_tr).fadeOut();
console.log(‘not found here’);
}
_val = ”;

})
});

});
})(jQuery)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s