用js实现表格多条件模糊查询,可兼容分页

本文介绍了一种基于四个条件(姓名、职位、直属上级、用户类型)进行模糊查询并分页展示的方法。通过定义两个数组来分别保存原始数据和筛选后数据,实现了灵活的数据过滤与展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求如下:

实现姓名、职位、直属上级、用户类型四个条件模糊查询,查询到的结果分页展示。

实现逻辑:

定义两个数组,其中vm.nowallUserLists为原始数据。vm.nowallUserFilter为筛选后数据。最终循环vm.nowallUserFilter来渲染表格。

筛选前,将vm.nowallUserLists的值赋给vm.nowallUserFilter,表格渲染全部数据。

筛选时,先初始化vm.nowallUserFilter为空数组,将筛选得到的内容推到这个数组中。此时表格渲染筛选后的数据。

因为不区分大小写,需要将筛选条件和被筛选的数据内容都用toUpperCase转化为大写状态。

四个筛选条件是且的关系,则用&&相连。

具体代码如下:

如果是单条件查询且单页查询(不分页),则有更简单的方法。网上流传的大多也是这种,如下:

$("table tbody tr").stop().hide() //将tbody中的tr都隐藏

   .filter(":contains('"+($(this).val())+"')").show();//将查询到相关内容的tr显示

转载于:https://www.cnblogs.com/nancyzn/p/7977783.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值