stateSave -- for REST-style URLs

stateSave -- for REST-style URLs

lisarushlisarush Posts: 85Questions: 15Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • lisarushlisarush Posts: 85Questions: 15Answers: 0
    edited July 2022

    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).

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • lisarushlisarush Posts: 85Questions: 15Answers: 0

    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 );
        },
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • lisarushlisarush Posts: 85Questions: 15Answers: 0

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

Sign In or Register to comment.