jquery中的組合表格過濾器

我有一個表格，我想對其應用3個過濾器。 2是選擇，1是搜索輸入。我唯一的問題是，如果我先使用搜索輸入，然後選擇其他2個過濾器中的任何一個，搜索輸入過濾器將被忽略。jquery中的組合表格過濾器

這是因爲我有$（this）.show（）;命令（第6行）在foreach中檢查每個錶行是否具有要顯示的條件。但是，我不知道如何擺脫它，仍然使腳本工作。任何想法？

這裏是我的代碼：

$("select#role_filter, select#type_filter").change(function() { 
     var role = $("select#role_filter option:selected").text(); 
     var type = $("select#type_filter option:selected").text(); 
     var type_val = $("select#type_filter option:selected").val(); 
     $('#access-points > tbody > tr').each(function() { 
      $(this).show(); 
      if (role != 'Display all') { 
       var tooltips = $(this).find('td:first-child').attr('tooltips').split(', '); 
       if (jQuery.inArray(role, tooltips) == -1) { 
        $(this).hide(); 
       } 
       tooltips = []; 
      } 
      if (type != 'Display all') { 
       var point_type = $(this).attr('point_type'); 
       if (point_type != type_val) { 
        $(this).hide(); 
       } 
      } 
     }); 
    }); 
    $("input#search_table").on("keyup", function() { 
     var search = $(this).val(); 
     $('select#role_filter, select#type_filter').trigger('change'); 
     $('#access-points > tbody > tr').each(function() { 
      if ($(this).css('display') != 'none') { 
       if ($(this).attr('access_point').toLowerCase().indexOf(search.toLowerCase()) === -1) 
        $(this).hide(); 
       else 
        $(this).show(); 
      } 
     }); 
    });

來源

2016-03-04 Florin Frătică

不要使用此'$（「＃選擇role_filter，選擇＃type_filter」）'使用這個：'$（「＃role_filter，#type_filter」）'的ID是最快的選擇和獨特的和其他人只是放慢速度。 –

如果你設置了一個演示，那將會更容易幫助你。 – Mottie

，如果我得到你的意圖，它是應用過濾器和搜索。使用當前的「過濾器」邏輯，它只顯示這兩個匹配項是否相同。最明顯的方法是獲取項目（表格行）然後顯示它們。

// returns a list of positive matches of the filters, 
// might be better to separate this into two functions 
// one for each filter (and chain them)? 
function checkFilters() { 
    var role = $('#role_filter').find('option:selected').text(); 
    var type = $('#type_filter').find('option:selected').text(); 
    var type_val = $('#type_filter').find('option:selected').val(); 
    return $('#access-points').find('tbody>tr').filter(function() { 
    var showme = true; 
    if (role != 'Display all') { 
     showme = jQuery.inArray(role, $(this).find('td').eq(0).attr('tooltips').split(', ')) == -1; 
    } 
    if (showme && type != 'Display all') { 
     showme = $(this).attr('point_type') === type_val; 
    } 
    return showme; 
    }); 
} 

// returns a list of positive matches 
function checkSearch(search) { 
    var candidates = checkFilters(); 
    return candidates.filter(function() { 
    return ($(this).attr('access_point').toLowerCase().indexOf(search) != -1); 
    }); 
} 

// BOTH these execute the same thing, just call it slightly different 
// they both then show the filtered items matches 
$("#role_filter, #type_filter").change(function() { 
    checkSearch($("#search_table").val().toLowerCase()).show(); 
}); 
$("#search_table").on("keyup", function() { 
    checkSearch($(this).val().toLowerCase()).show(); 
});

來源

2016-03-04 22:28:48

jquery中的組合表格過濾器

回答

相關問題