Getting DataTables to keep its state when the user clicks the back button (without the stateSave option)

Question

The problem I'm experiencing in Chrome and Edge:

1. Go to https://datatables.net/examples/basic_init/zero_configuration.html
2. Sort the table by some column (e.g. "Age")
3. Use the pagination interface at the bottom of the table to go to one of the other pages
4. Click on one of the navigation links to the left (e.g. "FAQs" or "Download")
5. Click the browser's back button and observe that the table is now back to its original state (sorted by the "Name" column and on page 1)

In Firefox, the table is still sorted by the correct column and is still on the correct page. How can I make Chrome and Edge also behave this way?

I know DataTables has its stateSave option (documentation and example), but the problem with that is when the user navigates around the site and then clicks a link to go to the page that has the DataTables table, it will put them back into the same state in that scenario too. I only want the user to be put back into the same state if they use their browser's back button.

Solution 1

Based on this post you could clear the saved state when you click on the link that leads you to the page with the table

see example here

$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   true,
        "ordering": true,
        "info":     false,
        stateSave: true
    } );
} );

$(".table_link").on("click", function(){
  $('#example').DataTable().state.clear();
});

Solution 2

Ok have kind of a crazy idea that might work for this. If you use the "stateSaveCallback" to set a URL hash this will add an item into the browser history. Then you could check for the hash value when the page loads. If the hash is not present then you clear the state cache on the DataTable.

Where this breaks down is in the following scenarios:

Scenario 1: User presses back button after state save on data table page:

• User does something on grid.
• State is saved triggering the stateSaveCallback
• stateSaveCallback updates the "window.location.hash" value.
• User then presses the "back" button
• Page goes to the current URL except without the hash.
• State is cleared.

Scenario 2: Users copies URL after state save has taken place

• User does something on grid.
• State is saved triggering the stateSaveCallback
• stateSaveCallback updates the "window.location.hash" value.
• User manually copies URL which includes hash value.
• User uses this copied value to directly navigate to data table page.
• Previous state won't be cleared.

But in all the other scenarios provided as long as you don't include the hash code on your navigation links this would reliably detect if a user used the back button to navigate to the grid since it would be it's own history item.

Comments

[thekodester]

I say this is best solution since you can't control how a user navigates to the page except with button/links on your site.

[Adrian]

Check this out it looks like you can detect if the user arrived using the back button: stackoverflow.com/questions/829046/… . Provided the linked solution holds up you could selectively clear the state when the user arrives via other means