使用数据表启用History API

Question

我dataTable在页面上有一个对象,表示我需要跟踪的版本列表/releases我想要添加以下功能

1. if /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.

Answer 1

这里你只有两个选择：

• 将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;
          }
      });
  });