基于layui的数据表格，在修改第n页数据后页码还能保持在当前页面

2020年12月17日 0条评论

基于layui的数据表格，在修改第n页数据后页码还能保持在当前页面

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; 
       }); 
     }); 