list.js 中有多个过滤器？

Question

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

它对每一列都工作正常，问题是如果我 select 一个 'origin' 过滤器，然后是一个 'status' 过滤器，反之亦然，第二个 selection 消灭了第一个。我想做的是让它们一起发挥作用。有什么想法吗？

Answer 1

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

请注意向每个 <select> 添加 data-prop 属性以确定为每个

筛选哪一列属性

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>

list.js 中有多个过滤器？

Multiple Filters in list.js?

javascript

jquery

list.js