Datatables 隐藏列

在实际开发中可能会遇到一种情况,后台的api接口传回来的数据比较多,而datatable中只需要显示一部分。如果之后的操作并不需要用到没有显示的数据,可以直接在columns配置中不配置相应的字段,比如以下数据源中每一项有6个字段:

datatable拿到的数据

如果我只在columns中只配置name,position,office,就只会显示这三项。

columns: [{
                "data": "name",
                "orderable": true, // 禁用排序
                "defaultContent": "",
                "width": "10%"

            }, {
                "data": "position",
                "orderable": true, // 禁用排序
                "defaultContent": "",
                "width": "10%"

            }, {
                "data": "office",
                "orderable": false, // 禁用排序
                "defaultContent": "",
                "width": "10%"

            }
            ],

只显示三列数据

但若是之后的操作中会用到未显示的数据,比如点击行后显示详细信息,那么可以只将其隐藏,可以在columnDefs配置中给想隐藏的列添加一个类,如hide_column。

<style>
        .hide_column{
            display: none;
        }
</style>
"columnDefs" :
                    [{
                        className: "hide_column",
                        "targets": [2,5] //将第3列和第6列隐藏,从0开始计数
                    }],

这样的话,使用datatables的api获得当前行的数据的话就也可以获得到隐藏列中的数据。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值