CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
Joseleg
Joseleg

Reputation: 393

Hide columns and keep columns in the datatable DOM

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.

Upvotes: 0

Views: 3377

Answers (1)

not satan
not satan

Reputation: 142

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

Upvotes: 1

Related Questions