ansaurus

Question

Answer 1

+1 A:

For your scenario the plugin may be overkill. You can achieve the desired effect with the jQuery snippet below:

$(".filter_tb").change(function() {
    $(".food_planner tbody tr td:nth-child(2)").each(function () {
        if ($(this).text() != this.value) {
            $(this).parent().hide();
        } else {
            $(this).parent().show(); 
        }
    });
});

If you would like to use the plugin, you can make it work by modifying the following lines:

Line 26: var words = phrase.toLowerCase().split(" "); to var words = phrase.toLowerCase();

Line 87: if (text.indexOf(words[i]) === -1) return false; to if (text != words[i]) return false;

Chris Pebble 2009-11-18 03:14:16

something is wrong in script, it is hiding all rows, not just parent row

Alexander Corotchi 2009-11-18 03:27:31

Thanks, i fixed, Thanks a lot for a good idea...

Alexander Corotchi 2009-11-18 03:34:44

Answer 2

+2 A:

So if you are wanting to simply do an exact match the filter might be a bit of overkill but here is an extra function to add to it to do just that:

jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
    var text = caseSensitive ? str : str.toLowerCase();
    if(text == words) return true;
    return false;
}

Here is my full code I used for testing:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
        <script type="text/javascript" src="./tablefilter.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function()
            {                
              var theTable = $('table.RegulatoryFilingsTable');
              $(".filter_tb").change(function() {
                $.uiTableFilter( theTable, this.value );
              });
            });
        </script>
    </head>
    <body>
         <select class="filter_tb">
            <option value="">All</option>
            <option value="6-K">6-K</option>
            <option value="20-F">20-F</option>
            <option value="SC 13G/A">SC 13G/A</option>
            <option value="SC 13G">SC 13G</option>
            <option value="F-10/A">F-10/A</option>
            <option value="F-X">F-X</option>
            <option value="F-10">F-10</option>
        </select>

        <br/><br/>

        <table class="RegulatoryFilingsTable">
            <thead><tr><th colspan="2">Your List</th><tr></thead>
            <tbody>
                <tr><td>6-K</td></tr>
                <tr><td>20-F</td></tr>
                <tr><td>SC 13G/A</td></tr>
                <tr><td>SC 13G</td></tr>
                <tr><td>F-10/A</td></tr>
                <tr><td>F-X</td></tr>
                <tr><td>F-10</td></tr>
            </tbody>
        </table>
   </body>
</html>

And the whole of the modified table filter script (which I called tablefilter.js):

/*
 * Copyright (c) 2008 Greg Weber greg at gregweber.info
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * documentation at http://gregweber.info/projects/uitablefilter
 *
 * allows table rows to be filtered (made invisible)
 * <code>
 * t = $('table')
 * $.uiTableFilter( t, phrase )
 * </code>
 * arguments:
 *   jQuery object containing table rows
 *   phrase to search for
 *   optional arguments:
 *     column to limit search too (the column title in the table header)
 *     ifHidden - callback to execute if one or more elements was hidden
 */
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){
  var new_hidden = false;
  if( this.last_phrase === phrase ) return false;

  var phrase_length = phrase.length;
  var words = phrase.toLowerCase().split(" ");

  // these function pointers may change
  var matches = function(elem) { elem.show() }
  var noMatch = function(elem) { elem.hide(); new_hidden = true }
  var getText = function(elem) { return elem.text() }

  if( column ) {
    var index = null;
    jq.find("thead > tr:last > th").each( function(i){
      if( $(this).text() == column ){
        index = i; return false;
      }
    });
    if( index == null ) throw("given column: " + column + " not found")

    getText = function(elem){ return jQuery(elem.find(
      ("td:eq(" + index + ")")  )).text()
    }
 }

  // if added one letter to last time,
  // just check newest word and only need to hide
  if( (words.size > 1) && (phrase.substr(0, phrase_length - 1) ===
        this.last_phrase) ) {

    if( phrase[-1] === " " )
    { this.last_phrase = phrase; return false; }

    var words = words[-1]; // just search for the newest word

    // only hide visible rows
    matches = function(elem) {;}
    var elems = jq.find("tbody > tr:visible")
  }
  else {
    new_hidden = true;
    var elems = jq.find("tbody > tr")
  }

  /* elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  }); */

  elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.is_word( getText(elem), words, false ) ?
      matches(elem) : noMatch(elem);
  });

  last_phrase = phrase;
  if( ifHidden && new_hidden ) ifHidden();
  return jq;
};

// caching for speedup
jQuery.uiTableFilter.last_phrase = ""

// not jQuery dependent
// "" [""] -> Boolean
// "" [""] Boolean -> Boolean
jQuery.uiTableFilter.has_words = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  for (var i=0; i < words.length; i++) {
    if (text.indexOf(words[i]) === -1) return false;
  }
  return true;
}

jQuery.uiTableFilter.is_word = function( str, words, caseSensitive )
{
  var text = caseSensitive ? str : str.toLowerCase();
  if(text == words) return true;
  return false;
}

Ambrosia 2009-11-18 03:36:01

thanks, I've already done without filter plugin.

Alexander Corotchi 2009-11-18 03:49:40

ansaurus

tags:

views:

answers:

jQuery, Filter on Table

related questions