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

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