Clear saved state by clearing local storage

maartenmachiels

Hi

My application uses tables with a whole bunch of columns. I'm using the fabulous ColVis plugin to hide and show the columns the user wants. Thanks to fnStateSave, I can very easily keep all filters and columns present after a page reload.

The problem is that if there's a filter present in one of the columns (I've got input boxes below each column) and that column is hidden, it's confusing for the user. The user sees a filtered table, but cannot see which column has been filtered.

My question is: I would like to implement a global table reset button, that clears the saved state of the current table only: filters, columns... the whole shabang. Ideally the button would be displayed in the same manner as the TableTools and ColVis buttons.

How would I go about implementing such a feature?

[code]
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
return JSON.parse( localStorage.getItem('DataTables_'+window.location.pathname) );
},
"fnStateLoadParams": function (oSettings, oData) {
$(oData.aoSearchCols).each(function(index,value) {
if(value.sSearch != '') {
$("input.search_init[data-colno='" + index + "']").val(value.sSearch);
}
});
}

[/code]

Thanks in advance for your answer. And thank you for your great software! My client LOVES it!

allan

There is a bug requesting that a `state.clear()` method can be implemented: https://github.com/DataTables/DataTables/issues/255 .

If I can shave enough space out of DataTables to pack this in to 75K, I'll implement this. I'd certainly like to do so for 1.10 release.

Until then, its just a case of using `localStorage.removeItem( 'DataTables_'+window.location.pathname );` would do it for the code above (but not for 1.10 which also includes the table id).

Allan

maartenmachiels

Allan, thank you for your response. I have implemented your answer. It works like a charm. This is what I did:

Firstly, when the table is loaded, I add a button next to my ColVis button.
[code]
"fnInitComplete": function(oSettings, json) {
$('div.ColVis').prepend('');
},
[/code]

Then, further on, onclick, I tie your code and reload the page.
[code]
$('body').on('click', '#reset_table', function(e){
e.preventDefault();
var confirmation = confirm('Do you want to reset this table?');
if(confirmation) {
localStorage.removeItem( 'DataTables_'+window.location.pathname );
location.reload();
}
});
[/code]

So thanks a bunch! Cannot wait for the next update of DataTables.

Mandeepsg3

is there some thing added to state save .. so that it clears by itself on logout or session destroy ...