columns().visible() hiding column but not showing it again

SmithfieldBuilding

I've previously been using column().visible() with the column index to toggle the hiding and showing of a column. However, as more columns and customisation has been added, it's become laborious to keep a track of the indexes, especially when columns are not added to the end of the table but in the middle.

To make it easier I've switched to columns().visible() as it enables me to select the column using a jQuery selector (which I don't think the former does?). After switching over, I now have a problem whereby I can hide the column when toggling the visibility from a dropdown, but it doesn't reappear when selected again.

Page:

https://webdev.brandnetics.co.uk/cm/assetzexchange/Bootstrap%204/Template/layout_4/LTR/default/full/browse-properties.html

JavaScript:

 var y = $('#tableBrowseProperties').DataTable({
        "responsive": {
            details: {
                type: 'none',
                display: $.fn.dataTable.Responsive.display.childRowImmediate,
                renderer: function (api, rowIdx, columns) {
                    var data = $.map(columns, function (col, i) {
                        return col.hidden ?
                            '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                            '<td class="w-50"><strong>' + col.title + ':' + '<strong></td> ' +
                            '<td class="w-50 text-right">' + col.data + '</td>' +
                            '</tr>' :
                            '';
                    }).join('');

                    return data ?
                        $('<table id="dt-vertical-table" class="table table-striped w-100"/>').append(data) :
                        false
                }
            }
        },


        colReorder: true,


        "searching": false
    });

    y.columns([$("#th-capitalisation"), $("#th-ae-fee"), $("#th-yield-bid"), $("#th-yield-mid"), $("#th-price-bid"), $("#th-price-mid"), $("#th-return-bid"), $("#th-return-mid"), $("#th-update"), $("#th-discount-bid"), $("#th-discount-mid")]).visible(false);
    y.on('column-visibility.dt', function (e) {
        y.columns.adjust().draw();
    });

    
    $('div.toggle-vis').on('click', function (e) {
        e.preventDefault();

        // Get the column API object
        var attr = $(this).attr('data-column');
        var column = y.columns($(attr));
        

        // Toggle the visibility
        
        column.visible(!column.visible());
        y.columns.adjust().draw( false );
        $(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
    });
    
    $('div.toggle-offer').on('click', function (e) {
        e.preventDefault();
        var columns = y.columns([$('#th-price-offer'), $('#th-yield-offer'), $('#th-return-offer'), $('#th-discount-offer')]);
        
        columns.visible(!columns.visible());
        y.columns.adjust().draw( false );
        $(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
    });
    
    $('div.toggle-bid').on('click', function (e) {
        e.preventDefault();
        var columns = y.columns([$('#th-price-bid'), $('#th-yield-bid'), $('#th-return-bid'), $('#th-discount-bid')]);
        
        columns.visible(!columns.visible());
        y.columns.adjust().draw( false );
        $(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
    });
    
    $('div.toggle-mid').on('click', function (e) {
        e.preventDefault();
        var columns = y.columns([$('#th-price-mid'), $('#th-yield-mid'), $('#th-return-mid'), $('#th-discount-mid')]);
        
        columns.visible(!columns.visible());
        y.columns.adjust().draw( false );
        $(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
    });

colin

This would cause issues - columns.visible(!columns.visible()); - as columns().visible() returns an API instance, and not a standard boolean.

You can use jQuery selectors with column().visible() - see here. I suspect it would be easier to revert back to that.

Colin

SmithfieldBuilding

Thanks Colin.

If I were to revert back to column().visible(), would I just have to chain together multiple methods if a particular button was selecting multiple columns?

colin

Ah, I didn't understand. If it is selecting multiple columns, you could either chain it as you say, or use columns().visible(). The problem is that you can't use !columns().visible(), as it doesn't return a boolean.

Colin

SmithfieldBuilding

I'm still struggling to get the columns to reappear when the dropdown is clicked again to show.

    
    $('div.toggle-offer').on('click', function (e) {
        e.preventDefault();
        var columns = [$('#th-price-offer'), $('#th-yield-offer'), $('#th-return-offer'), $('#th-discount-offer')];
        
        for (var i=0; i<columns.length; i++) {
            var col = columns[i];
            y.column( col ).visible() === true ? y.column( col ).visible( false ) : y.column( col ).visible( true );
            }
        
        $(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
});

I'm using column() instead of columns() so it returns a boolean.

colin

Can you update your test case, with steps on how to reproduce, please. Ideally, if you can simplify your code and put it into into a fiddle, like live.datatables.net, then we can work together to get it how you want.

Colin