Earlier today or yesterday (it kinda all meshes together) I was tasked with creating a filter for a rather large table output. I considered using ajax but since all the records were being loaded by default re-loading partial results seemed like a waste so I went with a jQuery solution, after some refining I got this.
|
1 2 3 4 5 6 7 8 9 |
jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("li:Contains('"+val+"')").each(function(){ $(this).show(); }); $("li:not(:Contains('"+val+"'))").hide(); } |
Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/
Simple and concise, it creates a new jQuery function “Contains” (not the capitalization) that searches inside an element without cases sensitivity. then it hides or shows the element accordingly. The resign for the show is so that when deleting characters from your search, bordaning it, results that were filtered appear again. This works great for lists like the one in the easy jquery filter example here.
If you want to use it with a table all you have to do it change the selector a bit, select all td elements instead and then select the parent of $(this) to remove or show the entire row, it’ll end of looking something like this.
|
1 2 3 4 5 6 7 8 9 |
jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("td:Contains('"+val+"')").each(function(){ $(this).parent().show(); }); $("td:not(:Contains('"+val+"'))").parent().hide(); } |
Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/
Got that tabe set up with alternating row colors? Just one more simple modification, use some if statements to toggle what you want the class to be back and fourth and and apply the style accordingly. Looking something like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery.expr[':'].Contains = function(a,i,m){ return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; }; function filter(val){ $("li:Contains('"+val+"')").each(function(){ $(this).show(); if(style=='on'){ style='off'; }else{ style='on'; } $(this).parent().attr("class",style); }); $("li:not(:Contains('"+val+"'))").hide(); } |
Snipplr: http://snipplr.com/view/49255/simple-jquery-content-filter-with-bonus-alternating-row-reset/
Each further iteration of the script is slower, and I noticed some lagg with the last one on my old laptop (not in any way enough to be a problem), mind you it was running all development apps and browser when I was working on it, so it was under abnormally heavy load (and, you know, a 3+ year old baseline machine). Any moder machine under normal conditions can breeze through this in a 2500+ entry table with alternating rows without a notice. It can always be expanded to include fancy animations (jQuery “blind” would work well here) and anything else you may want, but this makes a good working system if your not interested in the fancy stuff.
One Reply to “Super Simple Content filtering with jQuery”