PHP菜鸟博客_共同学习分享PHP技术心得【PHP爱好者】
基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面
2020-12-17 菜鸟站长


1.第一种方法



页面数据加载完之后把页码数存储到本地localStorage,页面数据重新渲染的时候指定页码为本地缓存中的页码。



优点是客户后面再打开页面直接展示上次阅读的页数,并且页面某行数据修改之后,页面重新渲染还能保留在当前页



缺点是重新渲染页面有类似刷新一样的效果,体验比较差。而且如果带有搜索条件之后,需要判断如果是搜索需要清空localStorage之中的页码数,如果直接点击页数不需要清空localStorage之中的页码数。



代码示例:






            ,page: {


                limit: 10


                ,limits: [10,15306090120150]


                ,curr:localStorage.getItem("spgl_curr")?localStorage.getItem("spgl_curr"):1     //指定本地存储的页码


            }


            ,done: function (rescurrcount) {     


                    console.log(rescurrcount);


                    localStorage.setItem("spgl_curr",curr);//存储页码


            }


1.png



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")                    




                }


            })


2.png




修改某条记录页面代码如下:






    //一般直接写在一个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.fieldfunction (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;


      });


    });





发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容