jQuery, Фильтр по таблице

У меня есть 1 проблема, я взял один jquery-плагин (фильтр на столе).jQuery, Фильтр по таблице

Это URL: http://gregweber.info/projects/demo/flavorzoom.html

Но у меня есть немного другой случай:

Вместо (текстовое поле) я использую (меню dropdawn)

<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>

Я делаю фильтр по значению , но это проблема: когда я выбираю «SC 13G», в таблице, конечно, отображается «SC 13G/A».

Могу ли я остановить этот? Я хочу, чтобы отобразить только "SC 13G" тот же один для "F-10 ---> F-10/A"

Это мой селектор JQuery:

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


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

    }); 


});

Если это возможно, помочь мне

Благодаря

источник

2009-11-18 AlexC

Таким образом, вы хотите, чтобы он точно соответствовал, а не фильтровался в соответствии с текстом, который может содержать запись. – SimonDever

Для вашего сценария плагин может быть слишком много. Вы можете достичь желаемого эффекта с помощью сниппета JQuery ниже:

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

Если вы хотели бы использовать плагин, вы можете заставить его работать, изменяя следующие строки:

Линия 26: var words = phrase.toLowerCase().split(" "); в var words = phrase.toLowerCase();

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

источник

2009-11-18 03:14:16

что-то не так в скрипте, оно скрывает все строки, а не только родительскую строку – AlexC

Спасибо, я исправил, спасибо за хорошую идею ... – AlexC

Так что, если вы желаете, чтобы просто точное соответствие фильтр может быть немного излишним, но здесь это дополнительная функция т о добавить к нему, чтобы сделать только что:

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

Вот мой полный код, который я использовал для тестирования:

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <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>

И весь сценарий модифицирована таблица фильтра (который я назвал 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; 
}

источник

2009-11-18 03:36:01 SimonDever

спасибо, я уже сделал без фильтра. – AlexC

jQuery, Фильтр по таблице

ответ

Смежные вопросы