云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

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

  • 内容
  • 评论
  • 相关

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

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:基于layui的数据表格,在修改第n页数据后页码还能保持在当前页面 - http://www.wlphp.com/?post=235

发表评论

电子邮件地址不会被公开。 必填项已用*标注