Hidden columns on desktop / visible only on tablet - mobile

perrotin

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.

allan

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

perrotin

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

perrotin

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