使用datatables按自定义条件筛选数据

本文介绍如何使用 jQuery Datatables 插件实现表格数据的自定义条件复合筛选功能,包括设置下拉菜单并通过 JavaScript 触发数据过滤。

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

datatables中用自定义条件进行过滤筛选数据的设置方法

使用jquery.datatables.js插件封装表格数据,可以方便快捷地对表格数据进行处理。该插件内置的功能组件诸如:列排序、数据统计、分页、数据过滤(数据查询)在这里不再一一赘述。

需实现的需求:在表格中设置下拉菜单,通过自定义条件(复合条件)的方式进行数据的筛选,如图一:


图一

实现方式之一:

菜单点击事件触发该操作:

1.分别获取各个下拉菜单选中的值,存入数组;

2.将数组转换为字符串赋值给input;

3.通过js操作自动触发input的keyup事件。


源代码:

var type_arr = new Array(3);//定义一个数组,用于存放自定义条件。n根据自定义下拉菜单的个数确定
var type_str = new String();
$.each($('.h_form .select_box .btn-group'),function(k,v){//遍历各下拉菜单
    $(v).on('click','ul li',function(){
        type_arr.splice(k,1,$(this).text());//每列条件更新时,新值替换旧值
        type_str = type_arr.join(" ");//将数组转换为字符串,用空格连接
        $(v).parents('.h_form').find('.dataTables_filter [type=search]').val( type_str ).keyup();//将字符串赋值给input,同时触发其keyup事件,实现数据的过滤筛选
    });
} );

效果图:





评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值