Question

我有一张桌子，我想对它应用3个过滤器。 2是选择，1是搜索输入。我唯一的问题是，如果我先使用搜索输入，那么我会选择其他2个过滤器中的任何一个，忽略搜索输入过滤器。

这是因为我有$（this）.show（）; foreach中的命令（第6行），用于检查每个表行是否具有要显示的条件。但是，我不知道如何摆脱它仍然使脚本工作。有什么想法吗？

这是我的代码：

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

Answer 1

如果我得到您的意图，那就是应用过滤器和搜索。使用当前逻辑“过滤器”，它只显示那些匹配的两个。最明显的方法是获取项目（表格行）然后显示它们。

// 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();
});

在jquery中组合表过滤器

1 个答案: