Geeks With Blogs

News

Len Smith's Facebook profile


nIgnuSharp.NET //len smith is a software developer in ann arbor, mi
I recently had a requirement to filter a table as the user was typing.

I was able to write a jQuery plugin to do this in just six lines of code.

I want to use jQuery to add a keyup handler to my search box, and target table(s) via a selector parameter.

First, in order to extend functionality onto a selector, we add a new function to $.fn


  $.fn.tableFilter = function(tableSelector) {


Then we want to get a reference to the table we're going to filter:

    table = $(tableSelector);


and we'll write a function that will actually perform the filtering:

  

    updateTable = function() {

 

now, on every keypress we need a blank slate.  lets hide all the rows besides the header:


        table.find('tr:gt(0)').hide();

then, we'll display the rows that match the text we've typed:


        table.find('td:contains("' + $(this).val() + '")').parents('tr').show();

    }


and we'll assign the keypress of event of our textbox to our new filterfing function:


    $(this).keyup(updateTable);

}

and bam!  we're done:

$.fn.tableFilter = function(tableSelector) {

    table = $(tableSelector);   

    updateTable = function() {

        table.find('tr:gt(0)').hide();       

        table.find('td:contains("' + $(this).val() + '")').parents('tr').show();

    }

    $(this).keyup(updateTable);

}

The we just wire up our plugin like this

$("#filter").tableFilter("#ProductGrid");

View the plugin in action here.

Note that this is case sensitive.  You can see how to add a case insensitive selector here: 
http://www.ericmmartin.com/creating-a-custom-jquery-selector/. Posted on Sunday, October 19, 2008 3:12 PM | Back to top


Comments on this post: Writing a jQuery plugin to filter a table on keypress

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
Awesome! In combination with the link to the case insensitive selector you saved me a lot of work to search the Internet :)
Left by Fons on Feb 19, 2009 10:57 PM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
One question though... who do I implement the case insensitive-selector in your tableFilter?
Left by Fons on Feb 19, 2009 11:19 PM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
Hey guys,

I've just implemented something similar but I think a bit more flexible.

Have a look at:
http://blogs.picnet.com.au/Guido/post/2009/06/29/JQuery-Table-Filter-Plugin.aspx

Let me know what you think
Left by Guido on Jul 06, 2009 5:26 PM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
The sample link seems not viewable... Can you give other link for the demo.
Left by ist on Aug 14, 2009 5:07 AM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
Love its simplicity !
Left by Jay on Oct 20, 2009 3:24 PM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
Need to see this code in action... demo page is not working :-(
Left by Ada on Mar 26, 2010 3:15 AM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
This was helpful and puts everything into a better perspective now - thanks so much.
Left by reverse call on Aug 02, 2010 8:26 AM

# re: Writing a jQuery plugin to filter a table on keypress
Requesting Gravatar...
What I thought was a complex matter made simple by the author. Amazing.
Left by custom essay paper on Mar 21, 2011 9:32 PM

# thanks
Requesting Gravatar...
I am definitely enjoying your website. You definitely have some great insight and great stories.
Left by find hosting on Jan 04, 2012 6:06 AM

Your comment:
 (will show your gravatar)


Copyright © Len Smith | Powered by: GeeksWithBlogs.net