datatables 获取筛选后的数据

本文介绍使用jQuery的Datatables插件,在数据筛选后如何获取筛选结果。通过监听'search.dt'事件或直接调用方法,可以获取到表格中被应用筛选条件后的数据。适用于前端开发人员在处理大量数据展示及交互时的需求。

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

https://blog.youkuaiyun.com/weixin_34417200/article/details/88204395

背景:

使用 jquery 的表格插件 datatables 获取它筛选后的数据,一开始,我只能获取到全部数据,因为插件默认把不符合条件的隐藏了,但是不代表数据改变了。

应用场景截图:

解决方法:

1.如果想在每次筛选后就立即获取,解决的方法:

var table = $('#example').DataTable();
table.on('search.dt', function() {
        //number of filtered rows
        console.log(table.rows( { filter : 'applied'} ).nodes().length);
        //filtered rows data as arrays
        console.log(table.rows( { filter : 'applied'} ).data());
      })
复制代码
2.如果想多次筛选后保存当前结果,解决的方法:

var table = $('#example').DataTable();
console.log(table.rows( { filter : 'applied'} ).data());复制代码
这样可以得到筛选后 td 的每一个 cell 的值,结果如下:

ok~大功告成!

参考链接

ps:

项目中如果以 json 形式传给后端,实现方法:

let filterData = table.rows( { filter : 'applied'} ).data()
          let data = []
          for (let i = 0;i < filterData.length; i++) {
            data.push({
              target_id: filterData[i][0],
              name: filterData[i][1],
              description: filterData[i][2],
              type: filterData[i][3],
              baseMean: filterData[i][4],
              log2FoldChange: filterData[i][5],
              pvalue: filterData[i][6],
              padj: filterData[i][7],
            })
          }
复制代码

--------------------- 
作者:weixin_34417200 
来源:优快云 
原文:https://blog.youkuaiyun.com/weixin_34417200/article/details/88204395 
版权声明:本文为博主原创文章,转载请附上博文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值