Vue DataTables stateSave not maintaining state

dwvandame

I am using Vue with DataTables trying to get stateSave to work. I can't really share the code, but I have "stateSave: true" in my DataTable options. My table also has a button for each row that links to a page with details about the row. I have been testing the stateSave by applying a filter (using SearchBuilder), selecting the details and then going back to the page with the DataTable. Upon returning to the page, the state of the table is not loaded and the filter is not applied. At that point, if I refresh the page, the state is loaded and the filter is applied. Additionally, we use the Vue router to move between views/pages.

allan

It appears to work okay here: https://stackblitz.com/edit/datatables-net-vue3-simple-a2uudm?file=src%2FApp.vue .

Perhaps you can modify that to demonstrate the issue?

Allan

dwvandame

Thank you for your quick reply Allan!
I was looking for some other things and came across https://datatables.net/forums/discussion/70897/how-can-i-go-to-the-previous-page-with-the-browser-back-button

I realize using the browser back button doesn't change DataTables views, but goes back to the last URL.

On my project the data table is at one URL, for example "/items/listing". For each row we have CRUD buttons to view/edit/delete. When I choose to view the first item, it takes me to "/items/listing/1". If I click the back arrow I am sent to "/items/listing" again, but the state isn't reflected. If I refresh the page at that point, the saved state is shown. Any ideas?

dwvandame

I wanted to post and let you know my solution:
I used stateSavedCallback and had it set a unique key instead of the one that was auto generated. There were multiple entries in local storage when I just used the default settings. Once I did this, I can go back and forth between the /items/listing and /items/listing/1 and the state is saved.

stateSaveCallback: function (settings, data) {
      localStorage.setItem(
          props.tableId,
          JSON.stringify(data)
      );
    },
stateLoadCallback: function () {
      return JSON.parse(localStorage.getItem(props.tableId));
    }

Thank you for your help!

colin

Nice, thanks for posting,

Colin

SayedGomaa

Thanks for posting **dwvandame **, but what's props?

SayedGomaa

I have resolved the problem by using the table ID as the storage name, thank you.
stateSaveCallback: function (settings, data) { localStorage.setItem($(settings.nTable).attr('id'), JSON.stringify(data)) }, stateLoadCallback: function (settings) { return JSON.parse(localStorage.getItem($(settings.nTable).attr('id'))) }