启用历史API与数据表

Question

我代表我想补充以下功能

1. 如果/releases?query=<query>，该dataTable将发布的名单，我需要保持跟踪与该URL /releases在页面上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

你只有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; 
       } 
      }); 
  });