Search code examples
jquerycssdomdatatables

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

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