Question

[Solved] jQuery DataTables hide column without removing it from DOM

I need to hide a column from showing up in jquery datatables.
When I hide the column using bVisible property it disappears from the DOM.

I want to set display property of table cells of a column to none so that the values do not appear in the view but they should still be present in the DOM as the column I am hiding identifies the row uniquely and I need to know the unique ID on row select. How to achieve this.

I am populating the table using aaData property using server side pagination.

Had a look at this question but these options remove it from the DOM.
jquery datatables hide column

Solution #1:

You should use className along with the columnDefs or the columns,

Define hide_column class in your css like this

.hide_column {
    display : none;
}

You have two ways to assign that .hide_column class:

Use columnDefs (assign custom class to first column):

$('#example').DataTable( {
  columnDefs: [
    { targets: [ 0 ],
      className: "hide_column"
    }
  ]
} );

OR columns

$('#example').DataTable( {
  "columns": [
    { className: "hide_column" },
    null,
    null,
    null,
    null
  ]
} );

code snippets taken from here


Old answer

Try adding

"sClass": "hide_column"

that should make that column hidden…

Respondent: Daniel

Solution #2:

To build on Daniel’s answer:

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>

This is also a useful strategy if you’re using server-side processing and want to pass in data from the ajax source without it being visible in the datatable. You’ll still be able to retrieve the column’s value on the front-end without needing to display it. Helpful for filtering via hidden data values etc.

Example:

// In datatables init file
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>
Respondent: DrewT

Solution #3:

If you want to hide multiple columns:

$('#example').dataTable({
  "columnDefs": [{ 
    "targets": [0,1,3], //Comma separated values
    "visible": false,
    "searchable": false }
  ]
});
Respondent: Jyotirmaya Prusty

Solution #4:

this is my contribution for u.

Not sure if the code is correct but its work.

If u do have more than one setup column like me.

$('#example').dataTable( {
  "columnDefs": [ {
        "targets"  : 'no-sort',
        "orderable": false,
        "order": [],
    }],
    "columnDefs": [ {
        "targets"  : 'hide_column',
        "orderable": false,
        "order": [],
        "visible": false
    }]
} );
Respondent: user7901356

Solution #5:

You can use the method hide.

$(element).hide();

To show the element, use the method show:

$(element).show();

To get the column that you want, you can use n-th child selector from jquery.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy