Responsive Shows hidden columns again

robov

It seems that when I turn responsive on, my hidden columns appear again.

Column hidden = works:
,"columnDefs":
[ { "visible": false, "searchable": false, "targets":[0] },

Turning on responsive = column showing again
,"responsive": true
,"columnDefs":
[ { "visible": false, "searchable": false, "targets":[0] },

Any suggestions ?

Running 1.10.2

larsonator

Hi robov, i think i am having the same issue as you, and have provided allan with a test case showing the bug:

http://live.datatables.net/wozojore/4/edit

robov

Thank you for providing the testcase. That is the same issue as I am having indeed

pansathish

For me also getting same issue.. Please any suggestion

robov

btw...This is such an amazing script... I really love it

allan

Add className: 'none' to the column you want to be hidden.

Allan

robov

Allan...thanks... Will that disable it from searching too? and can you please provide a sample how to add that to the column?

Thanks

allan

No - use columns.searchable if you want to remove it from searching.

Allan

robov

Thanks... can you please provide a sample on adding the classname to the column?

allan

See the examples in the documentation: columns.className.

Allan

robov

SuperB... sorry I missed that one...

JakeHulse

Allan,

I'm having the same issue. Added none and prevented searching; however, now the column is being displayed as a child row.

I have been using an MVC tool to integrate which has saved me a lot of time; however, I have no idea what the json structure is being returned in the ajax call. Since I have no idea what the data looks like, I'm not sure how to define the column options to include only the desired columns from the data.

What else can I do to solve this? Do you have an ETA on resolving this bug? If so, I may just wait as this functionality isn't immediately needed on production.

Thank you,
Jake

robov

Finally I had some time working on this project again.
Adding the className=none does not HIDE the column, it merely places it under the responsive + button, which is now always visible.

My datacolumn contains elemens for drawing the table, (like status=1 then color in grey)
But after I draw the table. I have no use for this column anymore. So I want to remove it completely from the users view... any suggestions?

robov

For me it is also in a child row

allan

Adding the className=none does not HIDE the column, it merely places it under the responsive + button, which is now always visible.

Can you link me to a page showing that problem please. I don't understand why it would be "under" another column given that they are in a simple table.

Allan

robov

Not really "under" I meant to say that the column is visible again when I press the responsive + button.

I want to load a column, but never show it. The data in the column is only used for styling the row.

allan

Ok. As I say, I would need a link. Using the class name as described above should work.

Allan

JakeHulse

Quick update to the link provided by larsonator:
http://live.datatables.net/wozojore/11/edit?html,css,js,output

Notice first name is hidden; however, can be exposed using the + to the left of the row.

Lintz

I have the same issue and until this bug is fixed I have used a new class called 'hidden' which works the same as 'none' but also hides the column from the detailed child row.

robov

@Lintz...
Can you please share your solution ?

allan

@robov - @Lintz did share the solution:

I have used a new class called 'hidden' which works the same as 'none'

As I noted above, if you want a completely hidden column that Responsive will not show, simply use columns.className and add the class none.

Allan

JakeHulse

Allan,

Doesnt this: http://live.datatables.net/wozojore/11/edit
demonstrate that adding className none will in fact not solve the problem?

robov: Please take a look at this for the solution described by Lintz: http://live.datatables.net/wozojore/13/edit

allan

@JakeHulse - Sorry I missed that link.

However, with the HTML error corrected (there was an extra column in the header) corrected, it appears to work as expected for me: http://live.datatables.net/wozojore/14/edit

Allan

Lintz

These are the modification I made to the dataTable.responsive.js file to always hide a column.

Edit _classLogic: function ()

var columns = this.s.dt.columns().eq(0).map( function (i) {
            return {
                className: this.column(i).header().className,
                includeIn: [],
                auto:      false,
                control: false,
                hidden: false //new property to always hide column
            };
        } );

and also

if ( className === 'all' ) {
                    // Include in all
                    hasClass = true;
                    col.includeIn = $.map( breakpoints, function (a) {
                        return a.name;
                    } );
                    return;
                }
                else if (className === 'none') {
                    // Include in none (default) and no auto
                    hasClass = true;
                    return;
                }
                else if ( className === 'control') {
                    // Special column that is only visible, when one of the other
                    // columns is hidden. This is used for the details control
                    hasClass = true;
                    col.control = true;
                    return;
                }
                else if(className === 'hidden')
                {
                    hasClass = true;
                    col.hidden = true;
                    col.control = true;
                    return;
                }

and then in the _columnsVisiblity: function ( breakpoint ) function the change is

for ( i=0, ien=columns.length ; i<ien ; i++ ) {
            if (columns[i].control && !columns[i].hidden) {
                display[i] = showControl;
            }
        }

The last thing to do is add the class name 'hidden' to the column you want to always hide.

Hope this helps others until the bug is fixed.

robov

@Lintz . Amazing !! thank you so much

Lintz

Not a problem @robov

JakeHulse

@allan
I must be missing something because when I open your update, I still see first name displayed if I expand the record by clicking the green + to the left of the last name. Are you not able to see first name? Am I missing the point of the Visible: false setting?

allan

@allan I must be missing something because when I open your update, I still see first name displayed if I expand the record by clicking the green

Yes - I see it and that is intended. Responsive will show the details of any column that is hidden.

If you don't want the first column to ever be visible to the end user you have a number of options:

• Simply don't include it in the table!
• If you still need the data:
  
  • Add it as a data attribute
  • Use Ajax sourced data and don't add a column definition for it.

Allan

JakeHulse

@Allan,

So you see the use of Visible = false is to HIDE the data on a non-responsive table completely; however, to SHOW the data when responsive is enabled. This doesn't make sense to me; however, its your code.

The biggest problem I am having is the table is generated from a 3rd party component, so I am trying to work within both your and their functionality. Both great tools; however, you can imagine I'm running into a few issues. That said, if you feel that Visible = False should be shown on a responsive table, I can use the solution I provided earlier or Lintz solution.

Thanks for all your hard work, and thank you too @Lintz

JakeHulse

@Allan,

Nope, still confused.
Class name = NONE hides the data and will not display it at all? Not even on a child row? Even your example http://live.datatables.net/wozojore/14/edit still shows the first name.

Per documentation:

none - Column will never be visible, regardless of the browser width

https://datatables.net/extensions/responsive/classes

So class name NONE should prevent the first name from being displayed ever; however, it is visible even on your example 14.

allan

The class name none will cause the column never to be visible. That is the case in my example.

However, the data for the column is visible in the child row. That is intended and correct behaviour for Responsive.

If you want the data not not ever be visible, as I say, don't include it as a column. Use a data attribute, or object based data if you are Ajax loading it.

Does that clarify the issue?

Allan