web-dev-qa-db-fra.com

Obtenir que DataTables conserve son état lorsque l'utilisateur clique sur le bouton Précédent (sans l'option stateSave)

Le problème que je rencontre dans Chrome et Edge:

  1. Allez à https://datatables.net/examples/basic_init/zero_configuration.html
  2. Trier le tableau par une colonne (par exemple "Age")
  3. Utilisez l'interface de pagination au bas du tableau pour accéder à l'une des autres pages.
  4. Cliquez sur l'un des liens de navigation à gauche (par exemple, "FAQ" ou "Télécharger").
  5. Cliquez sur le bouton Précédent du navigateur et observez que la table a retrouvé son état d'origine (triée dans la colonne "Nom" et à la page 1).

Dans Firefox, la table est toujours triée selon la colonne correcte et se trouve toujours sur la page correcte. Comment puis-je faire en sorte que Chrome et Edge se comportent également de cette manière?

Je sais que DataTables a son option stateSave ( documentation et exemple ), mais le problème est que l’utilisateur navigue sur le site, puis clique sur un lien pour aller à la page contenant la table DataTables. cela les remettra dans le même état dans ce scénario aussi. Je souhaite que l'utilisateur soit remis dans le même état s'il utilise le bouton retour de son navigateur.

javascriptjquerygoogle-chromedatatablesmicrosoft-edge
14
Nick

Sur la base de ce post , vous pouvez effacer l'état enregistré en cliquant sur le lien menant à la page contenant le tableau. 

voir exemple ici

$(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, tu as une idée folle qui pourrait marcher pour ça. Si vous utilisez "stateSaveCallback" pour définir un hachage d'URL, cela ajoutera un élément à l'historique du navigateur. Ensuite, vous pouvez vérifier la valeur de hachage lors du chargement de la page. Si le hachage n'est pas présent, vous effacez le cache d'état sur le DataTable.

Cela se produit dans les scénarios suivants:

Scénario 1: L'utilisateur appuie sur le bouton Précédent après la sauvegarde de l'état sur la page du tableau de données:

  • L'utilisateur fait quelque chose sur la grille.
  • L'état est sauvegardé déclenchant le stateSaveCallback
  • stateSaveCallback met à jour la valeur "window.location.hash".
  • L'utilisateur appuie ensuite sur le bouton "retour"
  • La page accède à l'URL actuelle sauf sans le hachage.
  • L'état est effacé.

Scénario 2: Les utilisateurs copient l'URL après la sauvegarde de l'état.

  • L'utilisateur fait quelque chose sur la grille.
  • L'état est sauvegardé déclenchant le stateSaveCallback
  • stateSaveCallback met à jour la valeur "window.location.hash".
  • L'utilisateur copie manuellement l'URL incluant la valeur de hachage.
  • L'utilisateur utilise cette valeur copiée pour accéder directement à la page du tableau de données.
  • L'état précédent ne sera pas effacé.

Toutefois, dans tous les autres scénarios fournis, tant que vous n'incluez pas le code de hachage dans vos liens de navigation, cela permettrait de détecter de manière fiable si un utilisateur utilisait le bouton Précédent pour accéder à la grille puisqu'il s'agirait d'un élément d'historique.

1
Adrian