通过 2 个选择列表过滤 html 表格

Question

我想通过 2 个选择列表过滤（隐藏除已选择之外的所有）表行中的多个条目。 第一个包含国家，第二个包含年份。

我可以编写一个按单个参数过滤的脚本，但是当用户选择德国和 2017 年（显示 2017 年德国的所有项目）时如何扩展功能？

<select class="form-control" id="filter-by-country">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<select class="form-control" id="filter-by-year">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 1

应该这样做（一条建议：css类名不能以数字开头，这是非法的，按选择项值过滤，而不是文本）

var filter_c=$('#filter-by-country');
var filter_y=$('#filter-by-year');
$('.filter_control').on('change', function(e){

var class_c=filter_c.val().toLowerCase();
var class_y='y'+filter_y.val().toLowerCase();
$('.all-projects tr.text-center').hide();
if(class_c=='country' || class_c=='all' ){
class_c='text-center'
}
if(class_y=='yyear' || class_y=='yall' ){
class_y='text-center'
}
console.log('.'+class_c+' .'+class_y)
$('.'+class_c+'.'+class_y).show();
});

codepen：https://codepen.io/peker-ercan/pen/jeqpQx

Answer 2

希望下面的例子有用，

var originalContent;

$(document).ready(function() {
  originalContent = $('#allprojects').html();

  $('#filter-by-country').change(function() {
    Loaddata();
  });

  $('#filter-by-year').change(function() {
    Loaddata();
  });
});

function Loaddata() {
  $('#allprojects').html(originalContent);

  var country = $('#filter-by-country').val().toLowerCase();
  var year = $('#filter-by-year').val().toLowerCase();

  var newSelector = "";

  if (country != "all") {
    newSelector += "." + country;
  }
  if (year != "all") {
    newSelector += "." + year;
  }

  var data = $('#allprojects').find("tr" + newSelector + "");
  $('#allprojects').html(data);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="filter-by-country">
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<select class="form-control" id="filter-by-year">
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table id='allprojects' class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 3

我的示例可以满足您的要求。如果您计划将过滤器添加为行上的类，您可以轻松地对其进行调整。

$(function() {

  var selectCountry = $('#filter-by-country');
  var selectYear = $('#filter-by-year');

  var countries = [];
  var years = [];

  selectCountry
    .children('option')
    .map(function(idx, item) {
      countries.push($(item).html().toLowerCase());
    });
  selectYear
    .children('option')
    .map(function(idx, item) {
      years.push($(item).html().toLowerCase());
    })

  countries = countries.filter(function(i) {
    return ['country', 'all'].indexOf(i) === -1
  })
  years = years.filter(function(i) {
    return ['country', 'all'].indexOf(i) === -1
  })

  var tableTR = $('.all-projects tbody').find('tr');

  var filterCountries = function() {

    var country = selectCountry.children('option:selected').val().toLowerCase();
    var year = selectYear.children('option:selected').val().toLowerCase();

    var conditionHappens = false;
    var foundCountry = countries.indexOf(country) !== -1;
    var foundYear = years.indexOf(year) !== -1;
    var conditions = [];

    if (foundCountry) {
      conditions.push(country);
    }

    if (foundYear) {
      conditions.push(year);
    }

    $.each(tableTR, function(idx, item) {

      var processCond = conditions.map(function(cond) {
        return $(item).hasClass(cond);
      }).indexOf(false) === -1;

      if (processCond) {
        $(item).show();
      } else {
        $(item).hide();
      }

    })

  }

  $(selectCountry).on('change', filterCountries)
  $(selectYear).on('change', filterCountries)

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- COUNTRIES -->
<select class="form-control" id="filter-by-country">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>Belgium</option>
  <option>Germany</option>
  <option>Russia</option>
</select>

<!-- YEARS -->
<select class="form-control" id="filter-by-year">
  <option selected="selected">COUNTRY</option>
  <option>ALL</option>
  <option>2018</option>
  <option>2017</option>
  <option>2016</option>
  <option>2015</option>
</select>

<table class="table table-hover all-projects">
  <thead>
    <tr>
      <th scope="col">order date</th>
      <th scope="col">project id</th>
      <th scope="col">full project's name</th>
      <th scope="col">quantity</th>
      <th scope="col">order no</th>

    </tr>
  </thead>
  <tbody>
    <tr class="text-center belgium 2018">
      <td>27.09.2018</td>
      <td></td>
      <td class="text-left">First project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center germany 2017">
      <td>27.09.2017</td>
      <td>5461</td>
      <td class="text-left">Second project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2016">
      <td>27.09.2016</td>
      <td>5462</td>
      <td class="text-left">Third project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr class="text-center russia 2018">
      <td>27.09.2018</td>
      <td>5462</td>
      <td class="text-left">Fourth project</td>
      <td>0</td>
      <td></td>
    </tr>
    <tbody>
</table>

Answer 4

如果你使用 KendoUI 来解决这个问题，你可以通过将数据添加到 this 来实现，它还具有自动完成的强大功能：

function filterAutoCompleteDataSource(e) {
  var gridFilter = e.sender.dataSource.filter();
  e.sender.element.find(".k-autocomplete input").data("kendoAutoComplete").dataSource.filter(gridFilter);
}

$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: {
              type: "number"
            },
            Freight: {
              type: "number"
            },
            ShipName: {
              type: "string"
            },
            OrderDate: {
              type: "date"
            },
            ShipCity: {
              type: "string"
            }
          }
        }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
    },
    dataBound: filterAutoCompleteDataSource,
    height: 550,
    filterable: {
      mode: "row"
    },
    pageable: true,
    columns: [{
      field: "OrderID",
      width: 225,
      filterable: {
        cell: {
          showOperators: false
        }
      }
    }, {
      field: "ShipName",
      width: 500,
      title: "Ship Name",
      filterable: {
        cell: {
          operator: "contains"
        }
      }
    }, {
      field: "Freight",
      width: 255,
      filterable: {
        cell: {
          operator: "gte"
        }
      }
    }, {
      field: "OrderDate",
      title: "Order Date",
      format: "{0:MM/dd/yyyy}"
    }]
  });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Kendo UI Snippet</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css" />

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>

<body>
  <div id="grid"></div>
</body>

</html>

这样，你的网格可能会更漂亮;)