stateSave -- for REST-style URLs

lisarush

In the documentation for the stateSave option, it says:

To be able to uniquely identify each table's state data, information is stored using a combination of the table's DOM id and the current page's pathname. If the table's id changes, or the page URL changes, the state information will be lost.

We would like to have stateSave work with REST-style URLs, e.g. /mysite/resources/{resourceId}
such that all URLs that follow this pattern could remember the values in stateSave. For example, a user's selection of what columns to display. However, in this case, each individual resourceId would have a different state. Is there a way to customize the stateSave -- such that we could specify the "URL/name" to save state under?

kthorngren

Take a look at stateLoadCallback and stateSaveCallback options to see if they will do what you want.

Kevin

lisarush

I have seen those, but I didn't see anything there that helped me.
The data parameter just looks like the data values -- but not the associated URL/key to store it under. Nor do I need it to go to the server.

I'm assuming you're saying I could implement my own callback functions to load/store directly from local(session)Storage. Doing something like this...?

"stateSaveCallback": function (settings, data) {
    localStorage.setItem( "thisIsMyUrlToSaveUnder", data );
},
"stateLoadCallback": function ( settings, callback ) {
    let data = localStorage.getItem( "thisIsMyUrlToSaveUnder" );
    callback( data );
}

Let me know if I'm on the right track here... I was really hoping for a setting (although, I could add that to my extension if needed).

allan

Hi Lisa,

Yes, you are on the right track there. What did you want to base the key to store the information on? Per the doc you quoted, we use the url and the table id. Are you thinking of something else? An increasing integer or something?

Allan

lisarush

We would still base it on the URL (maybe include the table id too?, tbd) -- but just using the part of the URL that doesn't change.
So, for a parameterized URL like mysite/resources/{resourceId}, we'd probably use a string like mysite/resources/individualResource.

So, I gave it a super-quick test try (just using a dummy name) & I'm assuming I need to add something else... I see both callbacks get called. I can see the data get saved into localStorage with the correct values (and the format looks the same as the data for other tables that are there). But, it is not remembering/reloading the settings when I reload the page (the values shown in 'stateLoadCallback' on the reload are not what was stored in localStorage before the page was reloaded). What am I doing wrong? Something else to do?

    "stateSaveCallback": function (settings, data) {
       console.log( 'stateSaveCallback for '+ window.location.pathname );
       console.log( data );
       localStorage.setItem( "thisIsMyUrlToSaveUnder", JSON.stringify(data) );
    },
    "stateLoadCallback": function ( settings, callback ) {
       console.log( 'stateLoadCallback' );
       let data = localStorage.getItem( "thisIsMyUrlToSaveUnder" );
       callback( data );
    },

allan

I think the only thing missing is that data in the callback there is a string. It needs to be JSON.parse()ed: http://live.datatables.net/guvewoqu/1/edit

Allan

lisarush

Well, duh.
Thanks so much for your help, as always. I much appreciate that you are always quick to answer and help!!