5

次の機能を追加したいdataTableURLで追跡する必要があるリリースのリストを表すオブジェクトがページにあります/releases

  1. の場合/releases?query=<query>、dataTableは提供されたクエリで初期化されます
  2. queryユーザーが検索語を変更すると、パラメーターが更新されます
  3. ブラウザの戻るボタンと進むボタンは適切なクエリを実行します

これまでのところ、最初の2つは実行できますが、イベントをリッスンするとpopstate、テーブルを再描画すると、pushStateそれを防ぐ方法がわかりません。これまでの私のコードは次のとおりです。

$(document).ready(function(){
  var prevSearch;
  var table = $('#releases').dataTable({
    "bJQueryUI" : true,
    "sPaginationType" : "full_numbers",
    "iDisplayLength" : 50,
    "oSearch": {"sSearch": '#{params[:query]}'},
    "fnDrawCallback": function(oSettings) {
        var curSearch = oSettings.oPreviousSearch.sSearch;
        if (!prevSearch) {
          prevSearch = curSearch;
        } else if (curSearch != prevSearch) {
          console.log("changed to: " + curSearch);
          history.pushState({query: curSearch}, "title", "releases?query=" + curSearch);
          prevSearch = curSearch;
        }
     }
  });
  window.addEventListener("popstate", function(e) {
    if (e.state) {
      table.fnFilter(e.state.query);          
    }
  });
});

rails私はバックエンドを使用しており、これはページで提供されているインラインJavaScriptであることに注意してください。

4

1 に答える 1

3

ここには2つのオプションしかありません:

  • pushState コードを drawCallback から移動します。ユーザーが何かを入力したときにデータテーブルを描画させる他のコードが必要です。そこに pushState コードを配置します。これが理想的なソリューションです

  • このようなハックを追加します

    $(document).ready(function () {
    var prevSearch;
    var saveState = true;
    var table = $('#releases').dataTable({
        "bJQueryUI":true,
        "sPaginationType":"full_numbers",
        "iDisplayLength":50,
        "oSearch":{"sSearch":'#{params[:query]}'},
        "fnDrawCallback":function (oSettings) {
            var curSearch = oSettings.oPreviousSearch.sSearch;
            if (!prevSearch) {
                prevSearch = curSearch;
            } else if (curSearch != prevSearch) {
                console.log("changed to: " + curSearch);
                if (saveState) {
                    history.pushState({query:curSearch}, "title", "releases?query=" + curSearch);
                }
                prevSearch = curSearch;
            }
        }
    });
    window.addEventListener("popstate", function (e) {
        if (e.state) {
            saveState = false;
            table.fnFilter(e.state.query);
            saveState = true;
        }
    });
});
于 2012-11-13T06:25:21.980 に答える