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中的组合表格过滤器

回答

相关问题