collapse / hide column at breakpoints

crush123

I have a datatable using the responsive add-on , which works great.

One column shows a thumbnail image, but I want to hide this column (only) on small devices.

I seem to be able to turn the Responsive child option on or off for all columns, but I don't want to display the image column at all

I'm sure I did something like this before (not using responsive add-on)

Tom (DataTables)

Hi Crush

Have you had a look at class control, I believe this should help you achieve what you want to do.

https://datatables.net/extensions/responsive/examples/column-control/classes.html

https://datatables.net/extensions/responsive/examples/column-control/init-classes.html

Thanks

Tom

crush123

Thanks Tom

I have looked at these articles, they seem to 'relegate' the desired column to the child row at the breakpoint, but they don't hide it entirely - unless I am missing something

allan

Hi,

@crush123 - If you don't want to display a column at all, the column visibility options (columns.visible) and API methods (column().visible()) can be used.

I'm slightly confused to be honest. In original question you say "I want to hide this column (only) on small devices" - the breakpoint examples that Tom linked to show how that might be done (full documentation). Is it that you want that column to be completely hidden, but only for small screens? There isn't a built in option for that I'm afraid. If you want to enable that yourself you'd need to add a little of your own Responsive logic to the code.

Allan

crush123

Re: "Is it that you want that column to be completely hidden, but only for small screens? "

That's what I am after Allan.

I think I managed it before using bootstrap hidden classes in the <th> and <td> tags, on data sourced from a recordset, but this will not do it for me with ajax sourced json

Didn't want to spend time on a home made solution if there was already an in-built one

allan

Its a neat idea - thanks for suggesting it. I'm not immediately sure how we would integrate that (probably more special classes), but its certainly worth exploring!

Allan

crush123

As an update, I managed to stumble upon a solution for this.

I am using bootstrap framework for this particular project, so in order to hide the email address column, for example, on smaller screens - in html, in my table, i edited

<th>Email</th>

to

<th class="hidden-xs hidden-sm">Email</th>

and in my js, i simply added the same classes, changing

{ data: "tblmembers.EmailAddress1"},

to

{ data: "tblmembers.EmailAddress1",
          className:"hidden-xs hidden-sm" 
        },

allan

Clever - thanks for posting back with that.

Allan