Datatables学习笔记——隐藏列

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

Datatables学习笔记——隐藏列_第1张图片
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%"

            }
            ],
Datatables学习笔记——隐藏列_第2张图片
只显示三列数据

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


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

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

你可能感兴趣的:(Datatables学习笔记——隐藏列)