Jquery DataTable Dynamic Hidden column (depending on if there is no Value)

a scene :

The front end invokes data back when it is initialized with a datatable, and the requirement is to dynamically determine whether a column is displayed based on the value of a returned flag bit.

This is the case where the current return value has an active offer range

This is a case of no event offer

You can see that the "campaign offer range" is Hidden.

second, the realization method and principle

Difficulty: The DataTable is the JS dynamic generation result set (<tr><td>), that is, we can not manually add the HTML tags in the ID or class

Implementation Process: in the "columns": [] in the current column as {orderable:false,sclass: "hiddencol", data: ' name '} in the name column, add sclass: "hiddencol", This attribute will add this class to the TD at the forefront and to the column names we defined earlier

After adding the class, we can now display the CSS of the current class or Not.

We need to include in the initial parameters of the DataTable

  dataTable: {

    function (settings, json) {                      },"columns": [{.... ｝]
  }

InitComplete is the method that is executed after the DataTable initializes the sink, and passes in Settings and JSON (all the data returned by the server can be viewed in Console.log (JSON))

In this method, you can determine whether the value returned by the server is active, then the class to control the display, the following to pay my way, I deleted a lot of my business logic code, so more intuitive

dataTable: {"ajax": {                        "url": "", Type:' GET ',                        "dataType": ' JSON '                    },                    "initcomplete":function(settings, Json) {vardata =json.data; if(data.length>0){                            varName = 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 Dynamic Hidden column (depending on if there is no Value)