list.js 中的多个过滤器？答案

【问题标题】：Multiple Filters in list.js?list.js 中的多个过滤器？
【发布时间】：2021-03-11 04:41:42
【问题描述】：

我有两列希望使用 list.js 进行过滤。我尝试了以下代码：

    var options = {
      valueNames: [ 'formformname', 'form-name', 'form-email','form-phone','form-branch','form-message','formstatus','form-assignment' ],
        page: 15,
        pagination: [{
        outerWindow: 2,
        }]
    };

    var userList = new List('users', options);

    $('#origin').change(function () {
        var selection = this.value;
        if (selection) {
            userList.filter(function(item) {
                return (item.values().formformname == selection);
            });
        } else {
            userList.filter();
        }
    });
    $('#status').change(function () {
        var selection = this.value;
        if (selection) {
            userList.filter(function(item) {
                return (item.values().formstatus == selection);
            });
        } else {
            userList.filter();
        }
    });

它对每一列都很好，问题是如果我选择一个“来源”过滤器，然后选择一个“状态”过滤器，反之亦然，第二个选择会抹去第一个。我想做的是让它们一起发挥作用。有什么想法吗？

【问题讨论】：

标签： javascript jquery list.js

【解决方案1】：

以下从选定的下拉列表中创建一个数组，并使用 Array#every() 检查列表过滤器中的每个项目。

注意将data-prop 属性添加到每个<select> 以确定要为每个属性过滤的列属性

var options = {
  valueNames: ['name', 'born']
};

var userList = new List('users', options);

const $sels = $('select.table-filter').change((e)=> {

  const filterArr = $sels.toArray()
                          .filter(el => !!el.value)
                          .map(el =>({prop: el.dataset.prop, value:el.value}))
  
  
  userList.filter(function(item) {    
      return !filterArr.length || filterArr.every(f =>  f.value === item.values()[f.prop]);      
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Name:
<select class="table-filter" data-prop="name">
  <option value="">Choose name</option>
  <option value="Jonny Stromberg">Jonny Stromberg</option>
  <option value="Jonas Arnklint">Jonas Arnklint</option>
  <option value="Martina Elm">Martina Elm</option>
  <option value="Gustaf Lindqvist">Gustaf Lindqvist</option>
</select>

Year Born:
<select class="table-filter" data-prop="born">
  <option value="">Choose year</option>
  <option value="1983">1983</option>
  <option value="1985">1985</option>
  <option value="1986">1986</option>
</select>
<hr/>
<div id="users">

  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="name">Jonny Stromberg</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Jonas Arnklint</td>
        <td class="born">1985</td>
      </tr>
      <tr>
        <td class="name">Martina Elm</td>
        <td class="born">1986</td>
      </tr>
      <tr>
        <td class="name">Gustaf Lindqvist</td>
        <td class="born">1983</td>
      </tr>
    </tbody>
  </table>

</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

【讨论】：