Jquery datatable 動態隱藏列（根據有無值）

一場景：

前端利用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 = 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'}
                        
                      ]
          }