带复选框和搜索框的引导表过滤器- javascript

Question

我有以下两个引导表过滤器的设置，它们各自完美地工作。但是，我很难“合并”他们在一起玩得很好：

  $("#filter").keyup ->
    rex = new RegExp($(this).val(), "i")
    $(".searchable tr").hide()
    $(".searchable tr").filter(->
        rex.test $(this).text()
      else
        rex.test $(this).text()
    ).show()
    $(".no-data").hide()
    $(".no-data").show()  if $(".searchable tr:visible").length is 0
    return

和

  $("#filterCheckBox").on "change", ->
    if @checked
      $(".searchable tr").hide()
      $(".searchable tr").filter(->
        $(this).find("td").eq(3).text() isnt 0
      ).show()
      $(".no-data").hide()
      $(".no-data").show()  if $(".searchable tr:visible").length is 0
    else
      $(".searchable tr").show()
      $(".no-data").hide()
    return

我的问题是，一个过滤器总是覆盖另一个过滤器。我已经尝试了相当多的合并，但没有运气或成功。

filterCheckBox应该比第一个过滤器“更强”。

编辑:这里是一个小提琴：http://jsfiddle.net/mtz1etfz/

Answer 1

好吧-我修改了你的小提琴。

我增加了两个新功能：

function checkZero(currentTr){

            if(  $('#filter2').is(':checked'))
            {
               return ($(currentTr).find('td').eq(3).text() !== "0");     
            }else
            {
                return true;
            }
  }

  function matchesSearch(currentTr) {

              var rex = new RegExp($("#filter").val(), 'i');
              return rex.test($(currentTr).text());
  }

它们基本上封装了您在变更处理程序中所做的检查。然后，我还修改了您的更改处理程序--调用这两个函数。您希望同时应用这两个“过滤器”，因此必须同时检查这两种情况：

$('.searchable tr').filter(function () {
               return matchesSearch(this) && checkZero(this);
            }).show();

http://jsfiddle.net/mtz1etfz/1/