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获得当前行的数据的话就也可以获得到隐藏列中的数据。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容