首页 > 代码库 > Jquery datatable 动态隐藏列（根据有无值）

Jquery datatable 动态隐藏列（根据有无值）

2024-09-22 21:08:01   217人阅读

一场景：

前端利用datatable初始化的时候会向后端调用数据，需求是 要动态的使某一列根据传回来的一个标志位是否有值来决定显示与否

这是当前传回值有活动优惠幅度的情况下

技术分享

 

这是没有活动优惠的情况下

技术分享

 

可以发现【活动优惠幅度】这一列都被隐藏了

 

 

二、实现方法及原理

  

实现难度：datatable是js动态生成结果集也就是（<tr><td>），也就是说我们无法在html的标签中手动的加入id或者class

实现过程：在 "columns":[] 的当前列之中 如  {orderable: false,sClass:"hiddenCol"，data:‘name‘} 在name这一列中加入 sClass:"hiddenCol" ，这个属性会给当前列的td 以及之前我们定义好的列名都加上这个class

              加上了class之后我们就可以当前class的css的显示与否了

              我们需要在datatable的初始参数中加入

  dataTable: {
    "initComplete": function(settings, json) {                      　　},"columns": [｛....｝]
  }

 

     initComplete是datatable初始化弯沉之后执行的方法 ,并且传入了settings和json（服务器返回的全部数据，可以用console.log（json）来查看格式）

     在这个方法中就可以来判断服务器传回来的值有没有活动，然后来通过class来控制是否显示了，下面付上我的方法,我把我的很多的业务逻辑代码删了，这样更直观一些

dataTable: {                    "ajax": {                        "url": "",                        type: ‘GET‘,                        "dataType": ‘json‘                    },                    "initComplete": function(settings, json) {                        var data =http://www.mamicode.com/ json.data;                        if (data.length>0){                            var name = data[0].name;                            if (name==""||name==undefined){                                $(".hiddenCol").css("display","none");                            }                        }else{                            $(".hiddenCol").css("display","none");                        }                    },                    "columns": [                        {                           .....                        }                        ,                        {orderable: false,sClass:"hiddenCol",data: ‘name‘}                                              ]          }

 

Jquery datatable 动态隐藏列（根据有无值）


联系
我们