Show/Hide Column in Views Table

Question

Is there any way I can show/hide entire column in Views Table?

Exclude from Display completely excludes the column which is not possible to show again, so, I am using Views Dynamic Fields Module to exclude the column initially and showing it when the filter is checked. Like in the picture, the initial view when Column is hidden using Views Dynamic Fields module.

When the Nick Name checkbox is checked the column is shown like:

However, I want to hide the Name Column entirely when Nick Name is shown.

I initially tried it with jQuery like:

// Hide the Name Column when Nick Name is shown
$('#edit-dyfield-field-girls-nickname').change(function() { // id of checkbox
                if ($('#edit-dyfield-field-girls-nickname').is(':checked')) {
                    $('.views-field-title').hide(); // Title points to Name field so all the th td have this class in Name
                }
            });

But it hides both Name and Nick Name for a while, and shows both fields again.

Any solution Drupal based or some tricks with jQuery/JavaScript would be fine, thank you.

Answer 1

I am not sure if this is The Drupal Way to fix this, but I fixed it with jQuery hide() and show().

// Hide the Name Column when Nick Name is shown
$('#edit-dyfield-field-girls-nickname').change(function() {
                if ($('#edit-dyfield-field-girls-nickname').is(':checked')) {
                    $(document).ajaxStop(function() { // Forcefully stopping Ajax function in the page as other ajax load was main culprit in my case
                        $('.views-field-title').hide();
                    });
                }

                if ($('#edit-dyfield-field-girls-nickname').is(':not(:checked)')) {
                    $(document).ajaxStop(function() {
                        $('.views-field-title').show();
                    });
                }

            });

Note: In the above example jQuery toggle() doesn't work, so, I have to put 2 if(){} statements for Check and UnCheck.

Answer 2

You could use Views MediaTable module.

Not sure if this is the exact use case you are after. this will allow the user to select the columns they want to see.

Views MediaTable integrate the functionality of MediaTable(http://consulenza-web.com/jquery/MediaTable/) into the Views module Table display, allowing the creation of dynamic & responsive Views tables where end users can choose to show or hide certain columns. This module also allows certain table column to behave responsively, hiding the less relevant data in smaller screen sizes.

The js code you used should also do the trick. But the issue you are facing is due to ajax loading. so you will have to put in drupal behavior so it gets called even after the ajax call.

You can check out the below link for more information regarding adding js

Managing JavaScript in Drupal 7