1.第一种方法
页面数据加载完之后把页码数存储到本地localStorage,页面数据重新渲染的时候指定页码为本地缓存中的页码。
优点是客户后面再打开页面直接展示上次阅读的页数,并且页面某行数据修改之后,页面重新渲染还能保留在当前页
缺点是重新渲染页面有类似刷新一样的效果,体验比较差。而且如果带有搜索条件之后,需要判断如果是搜索需要清空localStorage之中的页码数,如果直接点击页数不需要清空localStorage之中的页码数。
代码示例:
,page: {
limit: 10
,limits: [10,15, 30, 60, 90, 120, 150]
,curr:localStorage.getItem("spgl_curr")?localStorage.getItem("spgl_curr"):1 //指定本地存储的页码
}
,done: function (res, curr, count) {
console.log(res, curr, count);
localStorage.setItem("spgl_curr",curr);//存储页码
}
2.第二种方法(推荐)
不使用本地存贮页码数,在修改完某行记录后,发送ajax请求获取当前行最新的数据更新到此行对应位置即可。数据没有重新渲染,只是修改那条更新哪条,所以页面仍然保持在当前页面。
缺点是:客户后面再打开页面不能直接展示上次阅读的页数,但是能保证修改某条记录后依然保持在当前页面,页面无刷新。
可以方法1和方法2结合使用效果更佳
layer.open({
type:2,
title:"修改信息",
content:"{:url('add_good')}?id="+id,
area:["800px","520px"],
end:function (){
//return false;
//同步更新此条对应的值
//发送ajax请求页面
$.post("{:url('ajax_get_good_info')}",{id:id},function(data){
obj.update({
goodsname: data.info.goodsname
,goodsintegral: data.info.goodsintegral
});
},"json")
}
})
修改某条记录页面代码如下:
//一般直接写在一个js文件中
layui.use(['element', 'form', 'layedit'], function () {
var form = layui.form;
//监听提交1
form.on('submit(sub)', function (data) {
load = layer.load(2, { shade: [0.1, '#fff'] });
$.post("{:url('ajax_add_good')}", data.field, function (data) {
layer.close(load);
if (data.sta == 1) {
layer.msg(data.msg);
setInterval(function () {
window.parent.layer.closeAll();//关闭弹窗
//window.parent.get_table();
}, 1500);
} else {
layer.msg(data.msg);
}
}, "json");
return false;
});
});
本文标签:基于layui的数据表格在修改第n页数据后页码还能保持在当前页面
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面 - https://wlphp.com/?post=235