jQuery DataTables hide column without removing it from DOM

Question

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

Daniel · Accepted Answer · 2018-07-29T07:28:35.707

49

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...

edited Jul 29 '18 at 07:28

answered Jan 17 '13 at 07:03

Daniel

36,833
10
119
200

1

This answer is correct, but it's important to note that it doesn't work unless the hide_column class is added to the CSS. The way the author put it at the bottom in the "Old answer" section makes it look like it isn't still needed for the current answer. – robbpriestley Sep 17 '17 at 22:24
2

Used the sClass tag for the with the columns. It worked like a charm. Thank you. – George Eivaz Nov 28 '17 at 21:25
@Siddharth , what old about the answer? anyway I just replaced the capital D – Daniel Jul 29 '18 at 07:29
Hi! I have a question about this. I saw this and I used it too in my dataTables but my problem is this. Per rows inside my dataTables has a two checkboxes one is for the status and other one is ID . I hid the ID column so it won't look messy. Purpose is that I can update the data inside my dataTable. I wrapped my dataTable inside a `
` so it is passable to the server side. Now what happens is when I hid and try to update let us say 1st page is 1-10 of data. It updates and no error. But upon updating the 2nd page, it does not read the hidden column. It produces error from server. @Daniel
– Mar 05 '21 at 00:24
@ERROR401 I think you better open a new Q with all the needed code (minimal sample) – Daniel Mar 07 '21 at 09:54
Hi @Daniel here is the link to my question though I found out something in the internet, but if you have a solution for this thank you in advance :)) . https://stackoverflow.com/questions/66470718/datatable-using-columndefs-not-working-if-using-it-to-hide-specific-column-and-d – Mar 07 '21 at 23:09

DrewT · Answer 2 · 2013-09-02T02:18:30.773

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>

score 5 · Answer 3 · edited Jan 31 '17 at 13:45

5

If you want to hide multiple columns:

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

edited Jan 31 '17 at 13:45

VincenzoC

30,117
12
90
112

answered Jan 31 '17 at 13:24

Jyotirmaya Prusty

93
1
5

This is incorrect. They specifically specified they didn't want to use the visible property. – beechovsky Oct 14 '20 at 13:43

score 0 · Answer 4 · edited Apr 21 '17 at 12:35

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
    }]
} );

score -4 · Answer 5 · answered Jan 17 '13 at 05:24

-4

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.

answered Jan 17 '13 at 05:24

William Seiti Mizuta

7,669
3
31
23

jQuery DataTables hide column without removing it from DOM

5 Answers5

Linked