web-dev-qa-db-de.com

DataTables erhalten, um seinen Status beizubehalten, wenn der Benutzer auf die Zurück-Schaltfläche klickt (ohne die stateSave-Option)

Das Problem, das ich in Chrome und Edge habe:

  1. Gehen Sie zu https://datatables.net/examples/basic_init/zero_configuration.html
  2. Sortieren Sie die Tabelle nach einer Spalte (z. B. "Alter").
  3. Verwenden Sie die Seitenumbruch-Schnittstelle am unteren Rand der Tabelle, um zu einer der anderen Seiten zu gelangen
  4. Klicken Sie auf einen der Navigationslinks (z. B. "FAQs" oder "Download").
  5. Klicken Sie auf die Zurück-Schaltfläche des Browsers, und beachten Sie, dass sich die Tabelle jetzt wieder im ursprünglichen Zustand befindet (sortiert nach der Spalte "Name" und auf Seite 1).

In Firefox ist die Tabelle immer noch nach der richtigen Spalte sortiert und befindet sich immer noch auf der richtigen Seite. Wie kann ich Chrome und Edge auch so verhalten?

Ich weiß, DataTables hat seine stateSave-Option ( documentation und example ), aber das Problem besteht darin, dass der Benutzer durch die Site navigiert und dann auf einen Link klickt, um zu der Seite mit der DataTables-Tabelle zu gelangen. es wird sie auch in diesem Szenario wieder in denselben Zustand versetzen. Ich möchte nur, dass der Benutzer wieder in den gleichen Status versetzt wird, wenn er die Zurück-Schaltfläche seines Browsers verwendet.

14
Nick

Basierend auf diesem post können Sie den gespeicherten Status löschen, wenn Sie auf den Link klicken, der Sie zu der Seite mit der Tabelle führt 

siehe Beispiel hier

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

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

Ok, ich habe eine verrückte Idee, die dafür funktionieren könnte. Wenn Sie den "stateSaveCallback" verwenden, um einen URL-Hash festzulegen, wird ein Element zum Browserverlauf hinzugefügt. Dann könnten Sie beim Laden der Seite nach dem Hashwert suchen. Wenn der Hash nicht vorhanden ist, löschen Sie den Statuscache in der DataTable.

Wo dies zusammenbricht, ist in den folgenden Szenarien:

Szenario 1: Benutzer drückt die Schaltfläche nach dem Speichern der Datentabelle zurück:

  • Benutzer macht etwas in der Startaufstellung.
  • State wird gespeichert und löst stateSaveCallback aus
  • stateSaveCallback aktualisiert den Wert "window.location.hash".
  • Der Benutzer drückt dann die "Zurück" -Taste
  • Die Seite geht zur aktuellen URL, außer ohne den Hash.
  • Zustand ist gelöscht.

Szenario 2: Benutzer kopiert die URL, nachdem der Status gespeichert wurde

  • Benutzer macht etwas in der Startaufstellung.
  • State wird gespeichert und löst stateSaveCallback aus
  • stateSaveCallback aktualisiert den Wert "window.location.hash".
  • Der Benutzer kopiert die URL manuell, die den Hashwert enthält.
  • Der Benutzer verwendet diesen kopierten Wert, um direkt zur Datentabellenseite zu navigieren.
  • Vorheriger Zustand wird nicht gelöscht.

In allen anderen bereitgestellten Szenarien, solange Sie den Hash-Code nicht in Ihre Navigationslinks einfügen, würde dies zuverlässig erkennen, wenn ein Benutzer die Zurück-Schaltfläche zum Navigieren zum Raster verwendet, da es sich um ein eigenes Verlaufselement handelt.

1
Adrian