Conceal a column in jQuery DataTables without completely removing it from the DOM

Question

Conceal a column in jQuery DataTables without completely removing it from the DOM

I am trying to conceal a column in jQuery datatables without removing it from the DOM completely. When I attempt to hide the column using the bVisible property, it disappears entirely.

My goal is to set the display property of the table cells in that column to none so that the values are hidden on the page, but still exist in the DOM. This column serves as a unique identifier for each row, and I need access to the unique ID when a row is selected. How can I accomplish this?

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

I have reviewed this question, but their solutions seem to remove the column from the DOM entirely. jQuery datatables hide column

jquery css dom datatables

Answer 1

Answer №1

To hide a column in your table, you can use the className attribute along with either the columnDefs or columns.

Simply define a hide_column class in your CSS like this:

.hide_column {
    display : none;
}

There are two ways to assign the .hide_column class:

1. Using columnDefs (assign custom class to first column):

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

2. Using columns:

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

You can find more information and code snippets on styling columns here.

Previous Answer:

If you want to hide a column, try adding:

"sClass": "hide_column"

This should effectively hide the specified column.

Answer 2

To hide a column in your table, you can use the className attribute along with either the columnDefs or columns.

Simply define a hide_column class in your CSS like this:

.hide_column {
    display : none;
}

There are two ways to assign the .hide_column class:

1. Using columnDefs (assign custom class to first column):

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

2. Using columns:

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

You can find more information and code snippets on styling columns here.

Previous Answer:

If you want to hide a column, try adding:

"sClass": "hide_column"

This should effectively hide the specified column.

Answer 3

Answer №2

Expanding on the explanation provided by Daniel:

CSS:

th.hide_me, td.hide_me {display: none;}

When initializing datatables:

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // Assigning the class "hide_me" to the first column in the visible columns array

Don't forget to apply the hidden class to the header cell as well:

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

This method is especially useful when working with server-side processing and need to include data from an AJAX source without displaying it in the datatable. You can still access the column's value on the front-end without showing it, which is beneficial for filtering based on hidden data values.

For instance:

// Within the datatables initialization script
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>

Answer 4

Expanding on the explanation provided by Daniel:

CSS:

th.hide_me, td.hide_me {display: none;}

When initializing datatables:

"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ] } ] // Assigning the class "hide_me" to the first column in the visible columns array

Don't forget to apply the hidden class to the header cell as well:

<thead>
    <th class="hide_me">First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
</thead>

This method is especially useful when working with server-side processing and need to include data from an AJAX source without displaying it in the datatable. You can still access the column's value on the front-end without showing it, which is beneficial for filtering based on hidden data values.

For instance:

// Within the datatables initialization script
<script>
    var filteredValues = [];
    $('td.your_filtering_class').each(function(){
        var someVariable = $(this).find('.hide_me').html();
        filteredValues.push(someVariable);
    }
</script>

Answer 5

Answer №3

To conceal various columns simultaneously:

$('#table').dataTable({
  "columnDefs": [{ 
    "targets": [0,2,4], //Values separated by commas
    "visible": false,
    "searchable": false }
  ]
});

Answer 6

To conceal various columns simultaneously:

$('#table').dataTable({
  "columnDefs": [{ 
    "targets": [0,2,4], //Values separated by commas
    "visible": false,
    "searchable": false }
  ]
});

Answer 7

Answer №4

Here is my contribution for you.

I'm not entirely sure if the code is correct, but it seems to be working.

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

Answer 8

Here is my contribution for you.

I'm not entirely sure if the code is correct, but it seems to be working.

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

Answer 9

Answer №5

If you want to conceal an element, simply employ the hide method.

$(element).hide();

Conversely, if you wish to reveal the element, utilize the show method:

$(element).show();

In order to select a specific column, consider using the n-th child selector from jquery.

Answer 10

If you want to conceal an element, simply employ the hide method.

$(element).hide();

Conversely, if you wish to reveal the element, utilize the show method:

$(element).show();

In order to select a specific column, consider using the n-th child selector from jquery.

Conceal a column in jQuery DataTables without completely removing it from the DOM

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Thumbnail Centering Issue in Swiper Plugin by iDangero.us

PHP: Utilizing $_SESSION variables for automatic form filling across various PHP pages

Is it possible to create two distinct homepages for a single website?

Fade in and out list items while adjusting the height of the container

Utilize Twitter Bootstrap 4 to organize menu items in neat rows

Javascript addClass and removeClass functions are not functioning as expected

Generating a highchart by retrieving JSON data using AJAX

Tips for accessing the ID in a specific row of a datatable

Revamping FullCalendar: Strategies for refreshing or initializing FullCalendar anew or efficiently adding multiple events at once

Is there a Jquery function that retrieves the html content of a specified div element?

How to Retrieve Element Property Values from the DOM with JavaScript

Is there a way to have this <a> link trigger a postback to my ASP.NET method when clicked?

Looking to utilize jQuery for writing and reading data to and from a JSON file?

The issue of submitting a form with Ajax serialization

The Colorful World of CSS Backgrounds

When the button is clicked for the first time, the select option will return null

Using object-fit with the value of "cover" expands the size of the containing

Adjust the margin-top based on the height of another element

CSS transition not working properly when toggling

With JSX and CSS in React, I have the ability to easily generate two columns, but unfortunately cannot achieve the same fluid