web-dev-qa-db-ja.com

ユーザーが戻るボタンをクリックしたときにその状態を維持するためのDataTablesの取得（stateSaveオプションなし）

ChromeおよびEdgeで発生している問題：

  1. https://datatables.net/examples/basic_init/zero_configuration.html に移動します
  2. テーブルをいくつかの列（「年齢」など）で並べ替えます。
  3. 表の下部にあるページネーションインターフェイスを使用して、他のページのいずれかに移動します
  4. 左側のナビゲーションリンクのいずれかをクリックします（「FAQ」または「ダウンロード」など）。
  5. ブラウザの戻るボタンをクリックして、テーブルが元の状態に戻っていることを確認します（「名前」列でソートされ、1ページ目）。

Firefoxでは、テーブルは正しい列でソートされ、正しいページにあります。 ChromeおよびEdgeもこのように動作させるにはどうすればよいですか？

DataTablesにstateSaveオプション（ documentation および example ）があることは知っていますが、それに関する問題は、ユーザーがサイト内を移動してリンクをクリックしたときです。 DataTablesテーブルのあるページに移動すると、そのシナリオでも同じ状態に戻ります。ユーザーがブラウザーの戻るボタンを使用した場合にのみ、ユーザーを同じ状態に戻したいです。

javascriptjquerygoogle-chromedatatablesmicrosoft-edge
15
Nick

これに基づいて 投稿 テーブルのあるページに移動するリンクをクリックすると、保存された状態をクリアできます

例を見る ここ

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

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

これでうまくいくかもしれないちょっと変わったアイデアがあります。 「stateSaveCallback」を使用してURLハッシュを設定すると、ブラウザの履歴にアイテムが追加されます。次に、ページが読み込まれたときにハッシュ値を確認します。ハッシュが存在しない場合は、DataTableの状態キャッシュをクリアします。

これが機能しないのは、次のシナリオです。

シナリオ1：データテーブルページに状態を保存した後、ユーザーが戻るボタンを押した場合：

  • ユーザーはグリッド上で何かを行います。
  • 状態が保存され、stateSaveCallbackがトリガーされます
  • stateSaveCallbackは「window.location.hash」の値を更新します。
  • 次に、ユーザーは「戻る」ボタンを押します
  • ページは、ハッシュなしで現在のURLに移動します。
  • 状態がクリアされます。

シナリオ2：状態の保存後にユーザーがURLをコピーする

  • ユーザーはグリッド上で何かを行います。
  • 状態が保存され、stateSaveCallbackがトリガーされます
  • stateSaveCallbackは「window.location.hash」の値を更新します。
  • ユーザーはハッシュ値を含むURLを手動でコピーします。
  • ユーザーはこのコピーされた値を使用して、データテーブルページに直接移動します。
  • 以前の状態はクリアされません。

ただし、ナビゲーションリンクにハッシュコードを含めない限り、他のすべてのシナリオでは、ユーザーが戻るボタンを使用してグリッドに移動したかどうかを確実に検出します。これは、それが独自の履歴アイテムになるためです。

1
Adrian