Colvis columns menu items and localstorage question

lenamtl

Hi,

When using columns settings like this the hidden column name are still appearing into the list (they are just not selected) they are still clickable. I'd like to prevent that, any clue? I d'like to match the menu list to default columnDefs visibility.

{
extend: 'colvis',
columns: ':visible :not(:last-child)',
},  

How not to store the colvis value into statesave params?
Is this possible to have statesave to localstorage for search and colvis to sessionstorage?

Thanks

jr42.gordon

First, you added an errant space. Try this

columns: ':visible:not(:last-child)',

Also, if you are using stateSave , then DataTables will save the visibility of the columns for you. So I would remove the ':visible' from the above config.

lenamtl

Not it is not making any difference.
Even if I only have:visible the menu item of the hidden column from columnDefs appear into the colvis menu list.

I also apply this fixe just in case:
https://github.com/DataTables/Buttons/commit/040482e4df45d0f2e31399c5138488a53feee632

jr42.gordon

If you want to exclude certain columns from being used by ColVis, I would suggest the following:

1. Add class to each th element (e.g. 'not-colvis-col') to be excluded
2. set buttons "columns" config to following

"columns" : ':not(.not-colvis-col)',

lenamtl

I cannot use your suggestion, as I don't know in advance which column will be set as visible or not.
I guess I could add the class dynamically but I don't like to add to much condition
I'm ust wondering how come it's not working with visible like other buttons does?

jr42.gordon

Ok wait I am a little lost. How are you getting your initial table HTML? Do you not have it already? I guess we need a little more explanation as to how you are using DataTables within your application. As well as, the state of the table you are applying DataTables to.

lenamtl

To reproduce it let take a simple example
Using a basic table with some hidden columns and colvis.
set colvis like this

{
extend: 'colvis',
columns: ':visible',
}, 

Just put some columnDefs to "visible": false,
Now check colvis menu (I'm using 2 column menu)
the hidden column name will appear into the menu even if the are set to hidden, they should not appear if they are hidden.

allan

This is an interesting one - it comes down to when the different elements of the code run. Buttons is initialised on the (currently) internal plug-init event which happens before the column visibility is set. So it is correct in that sense that the columns are all visible.

You can use the new constructor for the Buttons to reorder the code: http://live.datatables.net/xamubulo/1/edit .

Allan

lenamtl

Hi,

Unfortunately while using New constructor I'm getting this error

dataTables.buttons.min.js:11 Uncaught TypeError: Cannot read property '_buttons' of undefined

Also I'm having question about syntax when using the New constructor for button

Can I still use dom: 'Blfrtip' with the other export button?
Should I put all buttons in the NEW constructor?

How to apply it to specific table if I have more than one table on the page?

var table = $('#example1').DataTable({...
var table = $('#example2').DataTable({...

Thanks

allan

Unfortunately while using New constructor I'm getting this error

If you post a link to a test case showing the issue, I would be happy to take a look at it.

Can I still use dom: 'Blfrtip' with the other export button?

If you are using the new method, then no. The dom option should not be used to add Buttons to the page, Insert it using the API and jQuery like in my example.

How to apply it to specific table if I have more than one table on the page?

Give them different variable names.

Allan

lenamtl

Hi,

I prefer to keep the dom if possible as your solution required a lot of modification on the existing code.
Is there a way by changing the js to init the column visibility first

allan

You could modify the Buttons code to listen only for the init event, rather than plugin-init.

One other option that has just come to mind is that you could use buttons().add() after initialisation of the table to add the column visibility buttons. i.e. keep your Buttons initialisation in with the table initialisation, but don't define the column visibility buttons there - do it after the table has been created.

Allan

lenamtl

Hi,

Can this code work directly or I need to use specific syntax?
Cause it's not displaying a button even if change the 0 to other value...

table.button().add( 0, {
extend: 'colvis',
collectionLayout: 'two-column', 
columns: ':visible',
} );

allan

It looks like there is a bug if you have an empty buttons array I'm afraid - button().add() doesn't actually insert the button correctly. It should be that you pass null as the first parameter, but that just does nothing.

As a workaround you can insert a temporary button and then remove it: http://live.datatables.net/xamubulo/4/edit .

However that is rubbish. I'll fix this.

Allan

lenamtl

Thanks it's working now, colvis button appear as the first item of button group (with other export button).
I really appreciate your help.

Suggestion for future release
That will be nice if we can decide if button are grouped or not like two different class.
Export button make sense to be grouped, Colvis is for different purpose.