2014-11-18 4 views
1

Работает мой фильтр поиска по запросу, но он фильтрует слишком много данных ... У меня есть скрытый div, который имеет больше данных для пользователя. Когда вы нажимаете на диалоговое окно, появляется всплывающее окно с дополнительной информацией .... Как только фильтр используется, он фильтрует строки из скрытого div, которые я бы хотел предотвратить ...фильтр jquery table, удаляющий слишком много данных

Как я могу предохранить фильтр от фильтрации данных из моего скрытого <div> ??

JSFIDDLE: http://jsfiddle.net/7urnro7c/1/

Я использую этот код я нашел, чтобы фильтровать мой стол:

$("#table tr:has(td)").each(function(){ 
    var t = $(this).text().toLowerCase(); //all row text 
     $("<td class='indexColumn'></td>").hide().text(t).appendTo(this); 
});//each tr 

$("#search").keyup(function(){ 
    var s = $(this).val().toLowerCase().split(" "); 
    //show all rows. 

    $("#table tr:hidden").show(); 
    $.each(s, function(){ 
     $("#table tr:visible .indexColumn:not(:contains('" + this + "'))").parent().hide(); 
    });//each 
});//key up. 

По умолчанию всплывающее окно должно показать всю информацию, как так: enter image description here

После использования фильтр (набрав bob) удаляет строки из всплывающего окна [отдел, менеджер, занятие отсутствует]:

enter image description here

+0

Таким образом, вы только хотите, чтобы применить к именам? Например. если я наберу «Бухгалтерский учет», он ничего не должен делать? –

+0

Просто разъяснение, это ваш вопрос, что если я наберу «Джо», он отфильтрует «Крис Покемон», потому что его менеджер не «Джо»? –

+0

Я все еще хочу, чтобы фильтр работал, когда вы вводите «Учет» ... но я не хочу, чтобы он удалял строки из скрытого div. – rubberchicken

ответ

2

Похоже, вам нужно получить текст элемента и ни один из тегов для детей, когда вы выполняете поиск. Быстрый поиск SO дает this

Они предлагают делать это:

$("#foo") 
    .clone() //clone the element 
    .children() //select all the children 
    .remove() //remove all the children 
    .end() //again go back to selected element 
    .text(); 

Для вашего кода было бы что-то вроде:

$("#table tr:has(td)").each(function(){ 
    var t = $(this).text().toLowerCase(); //all row text 
     $("<td class='indexColumn'></td>").hide().text(t).appendTo(this); 
});//each tr 

$("#search").keyup(function(){ 
    var s = $(this).val().toLowerCase().split(" "); 

    //show all rows. 
    $("#table tr:hidden").show(); 

    //Find each techname 
    $("#table tr:visible .techname").each(function(){  
     //Get on the text in the element 
     var text = getText(this); 

     //Loop through each search term checking if the term is in the etx 
     var containsText = false; 
     for(var i = 0; i < s.length; i++) 
     { 
      if(text.indexOf(s) > -1) 
      { 
       containsText = true; 
       break; 
      } 
     } 

     //If we didn't find the text hide the row 
     if(!containsText) 
     { 
      $(this).parent().hide(); 
     } 
    });//each 
});//key up. 


$('td.techname').click(function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     var id = $(this).attr('id'); 

     $('div#user-'+id).dialog({ modal: true, width: 400 }); 
    }); 

function getText(selector) 
{ 
    return $(selector) 
     .clone() //clone the element 
     .children() //select all the children 
     .remove() //remove all the children 
     .end() //again go back to selected element 
     .text() 
     .toLowerCase(); 
} 

JSFiddle Demo

+0

В скрипке есть много предупреждений :), показывающих пустое всплывающее окно на фильтре – rubberchicken

+0

D'oh! Мои извинения, я сказал Хром игнорировать предупреждения и забыл, что у меня есть предупреждение. Должен быть правильным сейчас –

+0

Когда я набираю «kris» и нажимаю на имя, которое оно всплывает без данных вообще ... – rubberchicken

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