JQuery, Filtre sur Table

Question

J'ai 1 problème, j'ai pris un plugin jQuery (filtre sur tableau).

Voici l'URL : http://gregweber.info/projects/demo/flavorzoom.html

Mais j'ai un cas un peu différent :

Au lieu d'utiliser (zone de texte) j'utilise (menu déroulant)

    Tout
    6-K
    20-F
    SC 13G/A
    SC 13G
    F-10/A
    F-X
    F-10

Je filtre par valeur, mais voici le problème : lorsque je sélectionne "SC 13G" dans le tableau, bien sûr "SC 13G/A" est affiché.

Puis-je arrêter cela ? Je veux afficher juste "SC 13G" de la même manière que pour "F-10 ---> F-10/A"

Voici mon sélecteur jQuery :

$(function() {
  var theTable = $('table.RegulatoryFilingsTable')

  $(".filter_tb").change(function() {
    $.uiTableFilter(theTable, this.value);
  });
});

Si c'est possible, aidez-moi

Merci

Answer 1

Donc si vous souhaitez simplement faire une correspondance exacte, le filtre pourrait être un peu excessif, mais voici une fonction supplémentaire à ajouter pour le faire :

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

Voici le code complet que j'ai utilisé pour les tests :

            $(document).ready(function()
            {                
              var theTable = $('table.RegulatoryFilingsTable');
              $(".filter_tb").change(function() {
                $.uiTableFilter( theTable, this.value );
              });
            });

            Tous
            6-K
            20-F
            SC 13G/A
            SC 13G
            F-10/A
            F-X
            F-10

            Votre Liste

                6-K
                20-F
                SC 13G/A
                SC 13G
                F-10/A
                F-X
                F-10

Et voici l'ensemble du script de filtre de tableau modifié (que j'ai appelé tablefilter.js) :

/*
 * Droits d'auteur (c) 2008 Greg Weber greg chez gregweber.info
 * Double licence sous les licences MIT et GPL :
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * documentation sur http://gregweber.info/projects/uitablefilter
 *
 * permet de filtrer (rendre invisible) les lignes de tableau
 * 
 * t = $('table')
 * $.uiTableFilter( t, phrase )
 * 
 * arguments :
 *   objet jQuery contenant les lignes de tableau
 *   phrase à rechercher
 *   arguments optionnels :
 *     colonne pour limiter la recherche (le titre de colonne dans l'en-tête du tableau)
 *     ifHidden - rappel à exécuter si un ou plusieurs éléments ont été masqués
 */
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(" ");

  // ces pointeurs de fonctions peuvent changer
  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("colonne donnée : " + column + " non trouvée")

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

  // si ajouté une lettre la dernière fois,
  // vérifiez simplement le dernier mot et il suffit de le cacher
  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]; // recherchez simplement le dernier mot

    // cacher uniquement les lignes visibles
    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;
};

// mise en cache pour accélérer
jQuery.uiTableFilter.last_phrase = ""

// non dépendant de jQuery
// "" [""] -> Boolean
// "" [""] Booléen -> Booléen
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;
}

Answer 2

Pour votre scénario, le plugin peut être superflu. Vous pouvez obtenir l'effet souhaité avec le code jQuery ci-dessous :

$(".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(); 
        }
    });
});

Si vous souhaitez utiliser le plugin, vous pouvez le faire fonctionner en modifiant les lignes suivantes :

Ligne 26 : var words = phrase.toLowerCase().split(" "); en var words = phrase.toLowerCase();

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