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

一場景：

前端利用datatable初始化的時候會向後端調用數據，需求是 要動態的使某一列根據傳回來的一個標誌位是否有值來決定顯示與否

這是當前傳回值有活動優惠幅度的狀況下

 

這是沒有活動優惠的狀況下

 

能夠發現【活動優惠幅度】這一列都被隱藏了

 

 

2、實現方法及原理

  

實現難度：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'}
                        
                      ]
          }