Simple jQuery content filter with BONUS alternating row reset


/ Published in: jQuery
Save to your folder(s)

A simple way to filter lists or tables that uses a new "Contains" (note capitalization) selector to clean up the code a bit. Three examples are below, first sorts through a list, second a table, third a tabe and it correctly the alternating row colors so that it keeps a nice clean look. Example at the link, any questions can be posted there too.


Copy this code and paste it in your HTML
  1. // Most simple version, sort items from list
  2. jQuery.expr[':'].Contains = function(a,i,m){
  3. return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  4. };
  5. function filter(val){
  6. $("li:Contains('"+val+"')").each(function(){
  7. $(this).show();
  8. });
  9. $("li:not(:Contains('"+val+"'))").hide();
  10. }
  11.  
  12. // Uses the .parent() feature to sort through a table, removing entire rows
  13. jQuery.expr[':'].Contains = function(a,i,m){
  14. return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  15. };
  16. function filter(val){
  17. $("td:Contains('"+val+"')").each(function(){
  18. $(this).parent().show();
  19. });
  20. $("td:not(:Contains('"+val+"'))").parent().hide();
  21. }
  22.  
  23. // Same as above but with another loop to correct alternating rows in a table
  24. jQuery.expr[':'].Contains = function(a,i,m){
  25. return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
  26. };
  27. function filter(val){
  28. $("li:Contains('"+val+"')").each(function(){
  29. $(this).show();
  30. if(style=='on'){
  31. style='off';
  32. }else{
  33. style='on';
  34. }
  35. $(this).parent().attr("class",style);
  36. });
  37. $("li:not(:Contains('"+val+"'))").hide();
  38. }

URL: http://fatfolderdesign.com/196/unimportant/super-simple-content-filtering-with-jquery

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.