javascript - 使用数据表启用历史 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;
          }
      });
  });