Jquery datatable 动态隐藏列(根据有无值)

一场景css

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

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

 

这是没有活动优惠的状况下ajax

 

能够发现【活动优惠幅度】这一列都被隐藏了json

 

 

2、实现方法及原理后端

  

实现难度:datatable是js动态生成结果集也就是(<tr><td>),也就是说咱们没法在html的标签中手动的加入id或者class服务器

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

              加上了class以后咱们就能够当前class的css的显示与否了spa

              咱们须要在datatable的初始参数中加入code

  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 = 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'}
                        
                      ]
          }
                   
相关文章
相关标签/搜索