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

一、场景

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

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

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

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

二、实现方法及原理

1、实现过程：

   

      

        
x1
        
x2
        
x3
        
x4
        
x5
        
x6
        
x7
        
x8
     
   

   

   

js片段，注意在fnDrawCallback事件中获取数据，根据数据的某些属性控制列（通过class）的显示。

不能在initComplete中控制列的属性，翻页失效且第二次加载数据时无法触发。

table = $('#table').DataTable({
    serverSide: true,
    ajax:{
        type:"post",
        url:"xx",
        data:function(){
         
        },
    columns:[
        {"data":'x1',"sclass":"c1"},
        {"data":'x2',"sclass":"c1"},
        {"data":'x3',"sclass":"c1"},
        {"data":'x4',"sclass":"c1"},
        {"data":'x5',"sclass":"c2"},
        {"data":'x6',"sclass":"c2"},
        {"data":'x7',"sclass":"c2"},
        {"data":'x8',"sclass":"c2"},
    ],
"fnDrawCallback": function(oSettings){
            //获取后台方式 直接可以拿到json 之后进行处理
	   var json=jQuery.parseJSON(oSettings.jqXHR.responseText);
	   var data = json.data;
           if(data.length>0){
               var tmp = data[0].x1;
               if(tmp == ""||tmp == undefined){
                    $(".c1").css("display","none");
               }else{
                    $(".c2").css("display","none");
               }
           }
       }
    }
})

 

在initComplete中如下：

在 "columns":[] 的当前列之中 如  {orderable: false,sClass:"text-center 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 = 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'}
                        
                      ]
          }

参考：https://www.cnblogs.com/daixinyu/p/6866516.html