Responsive extension: Hide column in *all* views

FriendlyWP

Hi, I'm using the Responsive extension and it works great, except it won't let me totally hide a column. Before adding responsive, I was using this to hide my column:

columnDefs: [ { visible: false, "targets" : 6}, ],

And that works great; it's a hidden "last-name" column which I use for sorting a column containing first-name+last-name. I never want that last-name column to show, on any screen width.

But when I add 'responsive:true' to my initialization code, I get the + symbol on each row which allows me to see that hidden column.

I've read extensively and tried a bunch of options including adding a class of "none" to the hidden column per this page: http://datatables.net/extensions/responsive/classes#Special-classes but that doesn't truly hide the column - it's still visible via the responsive show/hide control.

Am I missing something, or is this a bug? Thanks!

allan

But when I add 'responsive:true' to my initialization code, I get the + symbol on each row which allows me to see that hidden column.

I see - so its not that the column is made visible (which it shouldn't be - that would be a bug), but rather the problem is that the content of the column is shown in the child row?

That's not really a bug (although it is possibly a missing feature), as I had assumed that any column in the table would be visible. If you didn't want the data to be visible to the user at all, it shouldn't be in the table.

What is the data? If you are Ajax loading it, just don't include it in the table output. If it is being read from the DOM, can the table be modified to use that data as a data- attribute rather than displaying it in the HTML?

However, as I say, this possibly is a missing feature and something I'll consider for the future. Thanks!

Allan

FriendlyWP

Thanks Allan! the extra/hidden column contains "last name" and is used to sort a column which contains firstname+lastname. I didn't realize you could just add a data-order attribute to make the sort work that way!!!!! MAN. That is so cool! I'm just learning how 1.10 works after not having played around for several versions - what a timesaver.

Doing that and getting rid of my extra hidden column worked great. THANK YOU!

allan

Thanks for your kind words :-)

Allan

MishaK

If you are Ajax loading it, just don't include it in the table output.

Allan, could you give a direction how to achieve this.
Thr first thought - get Ajax data with hidden columns "in right side", and the number of TH columns in html do less. Or i can use some function for this.
Thank you.

chico3001

I hide some colums with css:

"columnDefs": [
{"targets": [0], "orderable": false, "visible": true, "searchable": false, className: "hide"},]

CSS:
.hide {
display: none!important;
}

MishaK

Thanks. I not tested it , but it not a "very nice" solution.

May be we already have it in API?

allan

@MishaK - Consider this example: http://datatables.net/examples/ajax/objects.html . There are 6 data points in the JSON data returned for each row, and there are 6 columns shown in the table.

If I didn't want to show one of those columns I simply wouldn't define it in the HTML or the columns array (for example, it might have only 5 entries rather than 6).

Allan

MishaK

2 allan

Thank you very much!

7TLaravel

I disagree. I also have a responsive table with an extra hidden column only used for filtering, like in http://datatables.net/examples/api/regex.html. I don't want the expansion image to consider this hidden column but unfortunately it does. It should be possible to add and filter a hidden column without influencing the expansion image? I used the 'hidden' className along with the 'visible' false option (in columns object), and the expansion image is gone. But when the expansion image is appearing because of normal responsive behaviour, the hidden column is also shown in the child-row. If I use the 'never' className the expansion image is allways shown.

So, the option 'hidden' in conjunction with 'visible' false is the best solution and if I also use the responsive.details.renderer function to filter out (not showing) the hidden columns in the child-row, this is for me the way to go.

responsive: {
            details: {
                renderer: function ( api, rowIdx ) {
                    // Select hidden columns for the given row
                    var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
                        var header = $( api.column( cell.column ).header() );
                        if((cell.column == 4) || (cell.column == 5)) {   // hidden columns
                            return '';
                        } else {
                            return '<li data-dtr-index="'+cell.column+'">'+
                                    '<span class="dtr-title">'+header.text()+':</span>'+
                                    '<span class="dtr-data">'+api.cell( cell ).data()+'</span>'+
                                    '</li>';
                        };
                    } ).toArray().join('');
     
                    return data ?
                        $('<ul/>').append( data ) :
                        false;
                }
            } 
        },  

allan

If I use the 'never' className the expansion image is allways shown.

As discussed in the other thread where you posted about this, I think this is a bug. I'll look into it shortly and post a fix.

Allan

fricred

but whitout this "missing feature" i cant use this =>
https://www.datatables.net/examples/api/show_hide.html whit responsive :( or this
https://www.datatables.net/extensions/colvis/

allan

Correct. Column visibility and Responsive are not currently compatible.

See this thread for details and my current ideas on how to resolve it.

Allan