Hide columns and keep columns in the datatable DOM

Question

I have a datatable and I hide some column this way:

<script>
var tbl = document.getElementById("myTable");
for (var j = 0; j < tbl.rows.length; j++){
      tbl.rows[j].cells[1].style.display = "none";      
      tbl.rows[j].cells[2].style.display = "none";
      tbl.rows[j].cells[6].style.display = "none"; 
      tbl.rows[j].cells[8].style.display = "none";
    }
</script>

Because when I try to hide the columns in the datatable definition, columns are removed from the DOM. I need to keep the columns in the DOM because I take the value of this column to change the background color of other cells.

My datatable function definition:

<script type="text/javascript">
$(document).ready( function() {
     $('#myTable').dataTable( {
      "bPaginate": false,
      "bJQueryUI": true,
      "bAutoWidth": false,
      "iDisplayLength": -1,
      "oLanguage": {
         "sSearch": "Buscar",
        "oPaginate":{
           "sFirst":    "Primero",
            "sLast":     "Ãimo",
            "sNext":     "Siguiente",
            "sPrevious": "Anterior"
        }
         }
     });

   });
   $(function() {
            $('.list-group-item').click(function() {
                $('.panel-collapse.in').collapse('hide');
            });
   });
</script>

How can hide columns and keep the columns in the DOM of the datatable.

You should do that in jquery like you have your data table. Plus, display: none does not remove from the dom. You must be missing something there and your problem be different . — , Nov 06 '14 at 21:22
@ADASein I try ti hide the columns in jquery, but the columns were removed from the datatable DOM and I needed to evaluate other columns. For that reason I decide to use display:none instead of jquery. When i try to use a fixed header, The header are fixed,but display the text from the hidden columns too. — Joseleg, Nov 06 '14 at 22:41

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Try this . . .

css:

th.hide_me, td.hide_me {display: none;}

In datatables init:

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "hide_me"

Remember to add your hidden class to your thead cell also:

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

Answer retrieved from: jQuery DataTables hide column without removing it from DOM

Hide columns and keep columns in the datatable DOM

1 Answers1