Question 37289 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery Datatable conditionally hide a column

I am trying to hide a Datable column when a condition is met. Here is what I have discovered and I am a bit lost.

Aproach 1 – this proves the theory I was testing but the column is always hidden (as expected)

var userTable = DataTable(this.$('#someTable'),{
 "bLengthChange" : true,
 "bInfo" : true,
"aoColumns" : [
  { "mDataProp" : function(d){
     return ("Test" || "N/A";
   }, "bVisible" : false, "bSortable" : true, sName : "Column1"
},
{ "mDataProp" : function(d){
     return ("Test" || "N/A";
   }, "bVisible" : true, "bSortable" : true, sName : "Column2"
},

]
}

Approach 2 : Using ternary operator – Column is always visible. How can I fix this ?

 var userTable = DataTable(this.$('#someTable'),{
 "bLengthChange" : true,
 "bInfo" : true,
"aoColumns" : [
  { "mDataProp" : function(d){
     return ("Test" || "N/A";
   }, "bVisible" : function(d){return  true ? 1 : false}, "bSortable" : true, sName : "Column1"
},
{ "mDataProp" : function(d){
     return ("Test" || "N/A";
   }, "bVisible" : true, "bSortable" : true, sName : "Column2"
},

I am at a loss of what am I doing wrong (there has to be something really simple that I am missing).

Thank you

Tags:

2

Answers


  1. 0

    Can you do something like this on button click or using a datatable callback?

    var dt = $('#someTable').DataTable();    
//hide the first column
dt.column(0).visible(false);
    Login or Signup to reply.
  2. 0

    If you want to hide/show the column of the data table then you may try the below approach:

    You can use simple jquery to hide and show the column.

    Create an array for the number of total columns. For example, here I have taken 2 column tables.

    visibility_arr = [ false, false ];
if(your condition here)
{
    visibility_arr[0]   = true;  
} else {
    visibility_arr[1]   = true;  
}

    And In your data table

    table = $('#datatable_list').DataTable({
    columns: [
        { data : 'your_column_0', name : 'your_column_0', 'width' : 220, 'visible' : visibility_arr[0] },
        { data : 'your_column_1', name : 'your_column_1', 'width' : 220, 'visible' : visibility_arr[1] },
    ], 
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search