javascript - list.js 中的多个过滤器?
问题描述
我有两列我想用 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();
}
});
它适用于每一列,问题是如果我选择一个“来源”过滤器,然后选择一个“状态”过滤器,反之亦然,第二个选择会清除第一个。我想做的是让它们一起发挥作用。有任何想法吗?
解决方案
以下从选定的下拉列表中创建一个数组,并使用 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>
推荐阅读
- wordpress - Woocommerce rest api 仅显示方括号 []"
- android-studio - 未解决的参考“placeresponse”
- java - 将时间选择器对话框中的按钮设置为始终在左侧?
- node.js - 处理临时访问令牌(和刷新令牌)
- python - python json不断附加相同的键和值
- android - 用于导航应用的 Android Automotive?
- c - 无法在用户定义的函数中调用库函数
- android - REACT-NATIVE 接收器通知并在应用程序终止时播放声音
- symfony - 无法覆盖 framework.disallow_search_engine_index
- python - Python数据框在缺少键的范围内为缺少的行附加默认值的行