我在页面上有一个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;
}
});
});
