指尖世界

分享的乐趣

datatables 保存状态

类别: 观点 更新时间: 2016-08-29
[摘要:假定项目页里分3类:表格页里、表格中数据详情页里、其他页里 请求功效:1、正在表格跳转到详情页里保管状况,从详情页回到表格页里规复之前的表格]

假设项目页面分3类:表格页面、表格中数据详情页面、其他页面
要求功能:1、在表格跳转到详情页面保存状态,从详情页回到表格页面恢复之前的表格状态
2、在其他页面跳转到表格页面中清除表格页面的状态,回到第一页。
解决方法:1、datatables自带stateSave保存表格状态,如果这里有自己设置的单列搜索内容需要保存,可以在详情页返回表格页面时用history.back()保存input或者select中的内容(昨天发现IE出现了点问题还没仔细看,谷歌内核浏览器倒是可以)。
2、状态保存问题解决了,还有一个问题是其他页面跳转到表格页时需要把表格页的状态清理掉,我的方法比较蠢:用一个值来判断是否第一次进入页面(可以用cookie,localStorage,sessionStorage),如果是则把变量isFirst设为1,跳转到详情页时把isFirst把isFirst设为1,然后再其他页中清理isFirst,这样就能知道是从其他页还是从详情页进入的表格页了(求大神教我更好的方法)
具体代码:
        var isFirst = sessionStorage.getItem("repairType");         if (isFirst != 1) {                   sessionStorage.setItem("repairType", 1);               table.state.clear();             table.ajax.reload();         }         clearF();	//这里是把repairType等数据设置为0 repairType=0也在里面
弯路:这里开始就不是讲解决方法了,没有兴趣的可以不用看了。
1、首先理想化的想法;第一次打开页面,保存状态是关闭的,然后在表格页中进入详情页时开启保存状态记录状态,详情页返回时开启保存状态,其他页进入时关闭保存状态,结果发现第一次的数据怎么也记录不了,因为第一次进页面是没有开启保存状态的。
2、查看官方api:http://datatables.net/reference/api/state.clear()
使用了
table.state.clear();
window.location.reload();

这样的确解决了问题,开心了一段时间。。。然后同事表示,这样做岂不是每个表格页第一次进入都要重新刷新一下,最后发现reload方法就不用刷新了:table.ajax.reload();

3、最后我发现,table.state.clear()都可以不要,只需要table.ajax.reload()。。。。

感谢关注 V8指尖世界精品文库频道,v8en.com是专门为互联网人打造的学习交流平台,全面满足互联网人工作与学习需求,更多互联网资讯尽在 V8指尖世界!