hide columns in jQuery dataTable

Question

I am using jQuery Datatable for rendering table in a jsp page. Number of columns in the table can vary depending on the server side. My code is:

<th width="10%">Beneficiary Bank</th>
<th width="10%">Depositor's Bank</th>
<th width="10%">Type</th>
<th width="8%">Reference No</th>
<th width="8%">Amount</th>  
<th width="8%">Date</th>
<th width="8%">Bonus?</th>
<th width="8%">Remarks</th>

I have 8 columns but depending on some conditions, I have to hide some of them. I am rendering table like this:

jQuery('#gridTable').dataTable( {
            "aaData":data,
            "aoColumns": [
                      { "mDataProp": "prop1", 
                        "bVisible" : function() {
                            if(condition1) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                      },

                      { "mDataProp": "prop2"
                      },

                      { "mDataProp": "prop3"
                      },

                      { "mDataProp": "propp8",
                        "bVisible" : function(){
                            if(condition2) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                      },

                      { "mRender": "prop9",
                        "bVisible" : function(){
                            if(condition2) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                      },

                      { "mDataProp": "prop10",
                         "bVisible" : function(){
                            if(condition2) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                      },

                      { "mDataProp": "prop11", 
                        "bVisible" : function(){
                            if(condition3) {
                                return false;
                            } else {
                                return true;
                            }
                        }
                      },

                      { "mDataProp": "prop12", 
                        "bVisible" : function(){
                                if(condition3) {
                                    return false;
                                } else {
                                    return true;
                                }
                        }
                      },

                  ]  ,
                "order": [] 
              } );

According to my code, depending on condition1 1st column should hide. Similarly columns 4-8 should also hide/show depending on some conditions. But they are not hiding. In table, all columns are shown.

I searched on internet about this but none of solutions helped.

Answer 1

The bVisible property is a boolean, it doesn't support functions. What you can do however, is move the logic into an initComplete function, and use column().visible() to hide the required columns.