我在页面上有一个dataTable对象,表示我需要跟踪的url / releases版本列表我要添加以下功能
> if / releases?query =< query> ;,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; } }); });