Hidden columns on desktop / visible only on tablet - mobile

Hidden columns on desktop / visible only on tablet - mobile

perrotinperrotin Posts: 36Questions: 8Answers: 1

Hi Alan,
For the displayed mobile, i'm trying to add a new columns when dataTable declared with a render contains all informations i need to display because the responsive display row child of datable is not well for the using I need.

here the configuration of the last columns :

{
 name: _("responsive infos"),
 data: "responsiveDisplay",
 orderable:false,
 className: 'mobile tablet',
 render: function ( data, type, full ) {
         .....
         return respInfos;
    }
}

I'm using the responsive of dataTable with className 'mobile tablet'
Other columns have class name 'desktop' (except the first having tablet too)

Problem is that on :
- desktop, there is the button "+" of responsive that display child row with this last columns
- tablet, display the first and this last columns, but display too button "+" of responsive with in child other columns.
- mobile, display well only this last columns without the button "+" and row child.

My question is,
how to display the last column only on mobile - tablet and hidden it on desktop (not in the child row of responsive) ?
how to hidden other columns on tablet ?

Best regards.

Answers

  • allanallan Posts: 51,736Questions: 1Answers: 7,825 Site admin

    If I've understood correctly, you basically don't want the child rows to show. is that correct? If so, this example shows how to do that.

    Allan

  • perrotinperrotin Posts: 36Questions: 8Answers: 1
    edited April 2017

    Hi alan,
    Not totally what i'm looking for.

    Here the exemple :
    http://jsfiddle.net/chouxe/t2sezspa/11/

    In desktop display, i would like display columns 0 - 6 (7 is hidden => not in child row) but when screen is reduce, columns 0-6 can be in a child row (7 always hidden).

    in tablet display, i would like display columns 0 and 7 (other are hidden and not in child rows)

    in mobile display, i would like display column 7 only (other are hidden , no child rows)

    Hope this explain can be more explicit for what i'm asking.

    Best regards

  • perrotinperrotin Posts: 36Questions: 8Answers: 1
    edited April 2017

    Hi allan,

    I thinks I have found solution with the event "responsive-resize".
    I just need to create a function that will append et remove data informations of the columns hidden in a columns i've choose and hidden the child row of the details responsive informations of your extension.

    Best regards

This discussion has been closed.