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

標籤：控制   als   data   set   .com   pre   標誌位   else   前端   

一情境：

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

 

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