javascript – 使用数据表启用History API

前端之家收集整理的这篇文章主要介绍了javascript – 使用数据表启用History API前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在页面上有一个dataTable对象,表示我需要跟踪的url / releases版本列表我要添加以下功能

> if / releases?query =< query&gt ;,dataTable将使用提供的查询进行初始化
>如果用户更改搜索词,则更新查询参数
>浏览器中的后退和前进按钮将进行相应的查询

到目前为止,我能够做到前两个,但是当我监听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.

解决方法

这里只有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},"releases?query=" + curSearch);
                }
                prevSearch = curSearch;
            }
        }
    });
    window.addEventListener("popstate",function (e) {
        if (e.state) {
            saveState = false;
            table.fnFilter(e.state.query);
            saveState = true;
        }
    });
});

猜你在找的JavaScript相关文章