Column visibility and responsive question

harmenzon

I would like to use both the colvis button functionality and the responsive functionality.

Like the datatables example:
https://datatables.net/extensions/responsive/examples/column-control/column-visibility.html

But for some reason, the example will not show columns that were hidden on initialisation of the datatable.
Can anyone help me to achieve this?

So on my display, the example datatable from the datatables website, hides the columns 'Extn.' and 'E-mail'. I believe this is done correctly by the responisive funcitonality. How ever, I can not get them to become visible again when selecting them with the colvis buttons.

Any help would be much appreciated.

colin

Hi @harmenzon ,

I just tried in this example, and it's working as expected for me, so I think it's something specific to your code I'm afraid.

Could you compare your code to the example above, and if nothing obvious after that, please could you post your code here, or better still create a live example.

Cheers,

Colin

harmenzon

In the image above, which is the example from data tables, only two columns are selected, the first name and email columns. Why is the email column not added next to the first name column? Why does it stay collapsed?

harmenzon

In the image above, which is the example from data tables, only two columns are selected, the first name and email columns. Why is the email column not added next to the first name column? Why does it stay collapsed?

colin

It's not dynamic - so if you hide/show while the Responsive display is open, it won't refresh - it only affects those that are opened after the field visibility toggle.

C

allan

Yes, its a display: block on the .form-control classes like in the example Colin posted above. That is causing all form elements to be displayed on heir own line.

This is in the Bootstrap 4 code:

.form-control{display:block;width:100%;...}

If you include the DataTables Bootstrap4 integration stylesheet and Javascript it resolves that: http://live.datatables.net/zayenije/3/edit .

The download builder is useful for making sure you have the correct files you need for DataTables.

Allan

harmenzon

@colin @allan Thank you.
With your comments I managed to solve my question.
An example can be found here:
http://live.datatables.net/nawonaqi/1/edit

colin

Nice, looks good, glad we could help!