使用数据表启用 History API

Question

我在页面上有一个 dataTable 对象，表示我需要使用 url /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。

Answer 1

这里只有两个选项：

• 将 pushState 代码移出 drawCallback。当用户输入某些内容时，必须有一些其他代码导致数据表绘制。把你的 pushState 代码放在那里。这是理想的解决方案

• 添加这样的 hack

  $(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;
          }
      });
  });