Save state excluding show/hide columns

dspoonia7

Hey Allan,

I wants to use datatable's state save option but excluding show/hide columns.
I tried using

stateSave: true, stateSaveParams: function(settings, data) { delete data.columns; }

but this thrown an error saying

TypeError: Cannot read property 'length' of undefined.

also tried data.columns = []; it also not working.
Followed https://www.datatables.net/forums/discussion/27259/selective-state-saving-only-on-colvis-plugin

Thanks!!

dspoonia7

Hey anyone please, I don't want to save the show/hide column settings. How can I exclude this from stateSave option?

dspoonia7

Hey can someone please confirm that it can be done or not?

allan

Don't delete the whole columns array, but rather loop over it and delete the visible property in each element.

Allan

dspoonia7

Tried this also

for (var i = data.columns.length - 1; i >= 0; i--) {
delete data.columns[i].visible;
}

But after doing this all columns are coming as hidden.

allan

Okay - the backup plan. Try simply setting the visible parameter as true. The check in DataTables is just using ! at the moment, so if it isn't present it is the same as it being false...

Allan

dspoonia7

That will show all the columns.

Actually I am using custom solution for show/hide column preferences, because I have Datatables on multiple pages and need to maintain show/hide columns preferences across all the pages. It is working fine for now.

Now I also wants to support column sorting and reordering across pages. To do that I need callbacks.
If not that then I need to exclude show/hide columns preferences from stateSave option from individual Datatables so that my global custom show/hide column preferences not get effected.

allan

Actually - DataTables' state loading code does check for the column visibility parameter not being present:

if ( col.visible !== undefined ) {

As long as you are using a reasonably new version of DataTables that should work. If it doesn't can you link to a page demonstrating the issue so I can debug it please.

Allan

dspoonia7

This is the code

if ( col.visible !== undefined ) {
columns[i].bVisible = col.visible;
}

Lets say If col.visible is undefined, then it hides the column or show the column?

And currently I am using DataTables 1.10.3

allan

By default it will show the column, although that can be changed with the initialisation options.

And currently I am using DataTables 1.10.3

That might be the issue. Please try updating to 1.10.11, which is the current release. I did change the state code a while back.

Allan

pixelice

Even using the latest version 1.10.11, I have the same problem as you had dspoonia7.

When stateSave: true the parameters from columns

"columns": [ null, null, null, {"visible": false}, ],

seems that don't work.

After spending some time I found a solution. Try to force the columns to be hidden in stateLoadParams as following:

stateLoadParams: function (settings, data) { data.columns['3'].visible = false; },

In this example it will hide the last column.

This seems to be a bug, only when the stateSave is true, because it keeps also the visibility. In my case I wanted to use show hide the last column based a PHP variable. Something similar with:

"columns": [ null, null, null, {"visible": <?=(!empty($is_super_admin)) ? "true" : "false"; ?>}, ],

So when the $is_super_admin will be true, in the local storage will be saved as true, and when the $is_super_admin becomes false it will be loaded from local storage as being true. By forcing the variables as I shown earlier it will work. Regards

allan

Can you link to a page showing the issue please? The information from the state object will override the columns.visible option if both are present.

Allan

pixelice

I don't have the code online, sorry. To replicate the issue you can do the following:
- use columns.visible option to set the visibility of a column to true
- enable "stateSave: true" and try to render one time the datatable
- change the column visibility (that you set initially to true) now to false

You should realise that after doing these steps that column is still visible, even if you set as false.

allan

Following your instructions the state of the columns has been saved. It been saved in the visible state, and as I noted the save state will override the default options. So what you describe is actually what I would expect to happen.

You could use state.clear() if you need to clear the saved data.

Allan

dspoonia7

Hey @pixelice,

It worked for me perfectly. Thanks to Alan :-)

I used the following-

stateSave: true,
'stateSaveParams': function(settings, data) {
data.columns.forEach(function(column) {
delete column.visible;
});
}

And for interfering in the column state while saving and loading, Use following-

'stateSaveCallback': function(settings, data) {
// make changes here before saving
window.localStorage['pageUrl'] = data;
},
'stateLoadCallback': function(settings) {
// make changes here before loading
return window.localStorage['pageUrl'];
}

As @Alan also has pointed out, I think you have some issue while saving column state to localStorage.

Hopefully, using "stateSaveCallback" might solve your issue.