Clear saved state by clearing local storage

Clear saved state by clearing local storage

maartenmachielsmaartenmachiels Posts: 13Questions: 0Answers: 0
edited February 2014 in DataTables 1.9
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!

Replies

  • allanallan Posts: 63,597Questions: 1Answers: 10,485 Site admin
    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
  • maartenmachielsmaartenmachiels Posts: 13Questions: 0Answers: 0
    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.
  • Mandeepsg3Mandeepsg3 Posts: 7Questions: 1Answers: 2

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

This discussion has been closed.