Hiding a column in jQuery dataTables

Question

I have a problem hiding a jQuery datatable column. I want this column to retrieve data, but I do not want it to appear on the display page. I want to hide my column number 8, so from CSS I tried to hide it and it gives me a resettable div.

Below my code for the data table and the class to hide is "hideCol".

var userTable = $('#user').dataTable( { "processing": true, "serverSide": true, "ajax":"admin/getData.php", "responsive" : true, "lengthMenu": [10, 25], "paginationType" : "input", columns: [ { data:'param0'}, { data: 'param1' }, { data: 'param2' }, { data: 'param3' }, { data: 'param4' }, { data: 'param5' }, { data: 'param6' }, { data: 'param7'}, ], fnRowCallback:function(nRow,aData, iDisplayIndex, iDisplayIndexFull){ var seenReportedVal =Number($('td:eq(7)', nRow).text()); $('td:eq(7)', nRow).addClass('hideCol'); if(seenReportedVal==0) { $(nRow).addClass('bold'); } }, "columnDefs": [ { "visible": false, "targets": 7 } ], }); 

Answer 1

try using this code

 var userTable = $('#user').dataTable( { "processing": true, "serverSide": true, "ajax":"admin/getData.php", "responsive" : true, "lengthMenu": [10, 25], "paginationType" : "input", columns: [ { data:'param0'}, { data: 'param1' }, { data: 'param2' }, { data: 'param3' }, { data: 'param4' }, { data: 'param5' }, { data: 'param6' }, { data: 'param7'}, ], "columnDefs": [ { "visible": false, "targets": [7] } ], }); 

Answer 2

You can use the visible property of the columns. I suggest enclosing the attributes of an object with quotes, for example. “columns,” “data,” or “visible.”

 "columns": [ { "data":'param0'}, { "data": 'param1', "visible": false}, { "data": 'param2'}, { "data": 'param3'}, { "data": 'param4'}, { "data": 'param5'}, { "data": 'param6'}, { "data": 'param7'}, ] 

Answer 3

I do not know if you have solved your problem, but since I had the same problem, I will share with you at least my solution.

It looks like you are using dataTable in responsive mode, so based on this, if you want to hide a column, you should apply a specific css class to it based on your needs. You apply to the th element associated with the column and your problem is resolved.

More information on the various css classes can be found here .

Answer 4

I solved this with css. May be useful for others.

 "aoColumnDefs": [ {"sClass": "dt_col_hide", "aTargets": [3]} ], 

dt_col_hide is a css class, in which case it will hide the column with index 3.

 .dt_col_hide{display: none;} 

or

 .dt_col_hide{visibility: hidden;} 

according to your requirement.