saveState and page reloads with ajax

saveState and page reloads with ajax

ole.mansharedtole.mansharedt Posts: 2Questions: 1Answers: 0

I am saving the state of my table with the standard saveState what results into a key value pair in the local storage of the browser when I load this page for the first time.
When I change the state (i. e. the page that is displayed), the json string in the local storage immediately gets updated (You can see this in Chrome->Developer Tools->Resources->Local Storage).
When reloading the page, this state is read and applied on the table so that it gets the same state as before. For this to work datatables relies on the automatically generated key for these settings (i.e.: DataTables_DataTables_Table_0_/productlist/).
The problem is: when not performing a full page reload but an ajax reload (where the main part of the page including the table is replaced by the new loaded content), the reloaded table gets initialized as another table on the same page and not as the same table as it would be the case on a full page reload. For that reason a new key is generated (DataTables_DataTables_Table_1_/productlist/) for the state data of that table. So the originally saved data were not used for the new (but same) table as it would do on a full page reload. With every ajax reload of the page I get a new key with state data in the local storage because datatables considers every table as new table.
Is there any way to control the generated key for the state data.

Thanks in advance for any help.

Answers

  • ole.mansharedtole.mansharedt Posts: 2Questions: 1Answers: 0

    OK, just got it.

    var tableIdentifier = (elm.id + elm.className + window.location.pathname).replace(/[- ._/]*/g, '');

                        stateSaveCallback: function(settings, data) {
                            if (supports_html5_storage()) {
                                window.localStorage.setItem(tableIdentifier, JSON.stringify(data));
                            }
                        },
                        stateLoadCallback: function(settings) {
                            if (supports_html5_storage()) {
                                return JSON.parse(window.localStorage.getItem(tableIdentifier));
                            }
                            return false;
                        }
    

    Simply used the stateSaveCallback and the stateLoadCallback to save the state into the local storage with my own key. The key is compound of the pathname (as it is by default), prefixed with a combination of id and className of a container element (that always wraps my tables). So the key remains the same for a table no matter if i do a full page reload or an ajax reload of parts of the page.

This discussion has been closed.