带有复选框AND searchbox-javascript的引导程序表过滤器

bootstrap table filter with checkbox AND searchbox - javascript

本文关键字：程序表 过滤器 searchbox-javascript 复选框 AND      更新时间：2023-09-26

我有以下两个引导表过滤器设置，它们各自都非常完美。然而，我有问题"合并"它们，它们可以很好地一起发挥：

  $("#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应该比第一个过滤器"更强"。

编辑：这是一个jsfiddle：http://jsfiddle.net/mtz1etfz/

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

我添加了两个新功能：

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

它们基本上封装了您在更改处理程序中所做的检查。然后我还修改了您的更改处理程序-调用BOTH函数。你想同时应用两个"过滤器"，所以你必须检查两个：

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

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

相关文章：