Responsive Shows hidden columns again

Responsive Shows hidden columns again

robovrobov Posts: 31Questions: 5Answers: 0

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

This question has accepted answers - jump to:

«1

Answers

  • larsonatorlarsonator Posts: 54Questions: 4Answers: 2

    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

  • robovrobov Posts: 31Questions: 5Answers: 0

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

  • pansathishpansathish Posts: 12Questions: 2Answers: 0

    For me also getting same issue.. Please any suggestion

  • robovrobov Posts: 31Questions: 5Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

    Allan

  • robovrobov Posts: 31Questions: 5Answers: 0

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

    Thanks

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

    Allan

  • robovrobov Posts: 31Questions: 5Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    See the examples in the documentation: columns.className.

    Allan

  • robovrobov Posts: 31Questions: 5Answers: 0

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

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    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

  • robovrobov Posts: 31Questions: 5Answers: 0

    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?

  • robovrobov Posts: 31Questions: 5Answers: 0

    For me it is also in a child row

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • robovrobov Posts: 31Questions: 5Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    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.

  • LintzLintz Posts: 10Questions: 1Answers: 0

    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.

  • robovrobov Posts: 31Questions: 5Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    @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

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    @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

  • LintzLintz Posts: 10Questions: 1Answers: 0

    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.

  • robovrobov Posts: 31Questions: 5Answers: 0

    @Lintz . Amazing !! thank you so much

  • LintzLintz Posts: 10Questions: 1Answers: 0

    Not a problem @robov

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    @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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    @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

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    @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

  • JakeHulseJakeHulse Posts: 11Questions: 0Answers: 0

    @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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.