LayUI table 刷新页面不重置页码

layui 同时被 3 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅
3 篇文章 0 订阅

layui table 刷新页面时会自动将页码初始化成1,本章内容介绍怎么让layui table刷新页面后留在当前页

要实现此方法主要使用到cookie存储最后一次翻页的页码,主要修改layui\lay\modules\table.js文件。

1、table.js文件中实现cookie的设置、获取和删除的方法。

//表格页码在cookie中的前缀名
var layuiTableCurrCookieName = "layuiTableCurrCookieName";
/*
	根据表格ID设置cookie值
	@Param tableId  table定义时ID
	@Param value 表格的当前页码值
*/
function setCurrCookie(tableId, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    //设置“path=/”表示所有页面共享改变量,如果不制定path,则每个域会自动生成一个path,导致不能跨域共享
    document.cookie = layuiTableCurrCookieName + tableId + "="+ value + ";expires=" + exp.toGMTString() + ";path=/";
}

/*
	根据表格ID获取cookie值
	@Param tableId 表格定义ID
*/
function getCurrCookie(tableId) {
    var arr,reg=new RegExp("(^| )"+layuiTableCurrCookieName +tableId+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return 1;
}
/*
	清除某个表格的cookie值
	@Param tableId 表格ID
*/
function clearTableIdCurrCookie(tableId) {
	var cval = null;
	var name = layuiTableCurrCookieName + tableId;
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cvals = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(cvals != null){
        cval = unescape(cvals[2]);
    }
    if(cval != null){
        document.cookie= name + "="+cval+";expires="+exp.toGMTString() + ";path=/";
    }
}
/*
	清除所有table存储的缓存
*/
function clearAllCurrCookie() {
    var arr = document.cookie.match(/layuiTableCurrCookieName[a-zA-Z0-9]*=/g);
    if(arr == null){
        return;
    }
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    for(var i = 0; i < arr.length; i++){
        var name = arr[i];
        if(name.length > 0){
            name = name.substring(0, name.length-1);
            var cval = null;
            var cvals = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
            if(cvals != null){
                cval = unescape(cvals[2]);
            }
            if(cval != null){
                document.cookie= name + "="+cval+";expires="+exp.toGMTString() + ";path=/";
            }
        }
    }
}

2、在table.js中设置是否启用cookie,在初始化表格的时候设置初始页码,在翻页的时候设置当前页码到cookie中。

;layui.define(["laytpl", "laypage", "layer", "form"], function (e) {
    "use strict";
    var t = layui.$, i = layui.laytpl, a = layui.laypage, l = layui.layer, n = layui.form, o = layui.hint(),
        r = layui.device(), d = {
        	//1、在config配置中添加enabledCurrCookie参数,表示设置是否开启table页码缓存,这里默认设置false,表示table默认不开启cookie缓存
            config: {checkName: "LAY_CHECKED", indexName: "LAY_TABLE_INDEX", enabledCurrCookie: false},
            cache: {},
            index: layui.table ? layui.table.index + 1e4 : 0,
            set: function (e) {
                var i = this;
                return i.config = t.extend({}, i.config, e), i
            },
            on: function (e, t) {
                return layui.onevent.call(this, s, e, t)
            }
        };
        
	...
	
	S.prototype.pullData = function (e, i) {
        var a = this, n = a.config, o = n.request, r = n.response, d = function () {
            "object" == typeof n.initSort && a.sort(n.initSort.field, n.initSort.type)
        };
        if (a.startTime = (new Date).getTime(), n.url) {
            var c = {};
            //在数据请求前设置页码
            if(n.enabledCurrCookie === true){
            	//当table初始化,并且没有设置初始页码时候n.page是boolean类型,其他情况n.page 是 object类型
                if(n.page === true){
                	//初始化table,并没有设置初始页码时,获取cookie中的页面作为初始页。
                    e = getCurrCookie(n.id);
                }else{
                	//其他情况将当前页设置到cookie中
                    setCurrCookie(n.id, e);
                }
            }
            c[o.pageName] = e;
            c[o.limitName] = n.limit;
            t.ajax({
                type: n.method || "get",
                url: n.url,
                data: t.extend(c, n.where),
                dataType: "json",
                success: function (t) {
                    if(null != startLoading){
                        layer.close(startLoading);
                        startLoading = null;
                    }
                    return t[r.statusName] != r.statusCode ? (a.renderForm(), a.layMain.html('<div class="' + f + '">' + (t[r.msgName] || "返回的数据状态异常") + "</div>")) : (a.renderData(t, e, t[r.countName]), d(), n.time = (new Date).getTime() - a.startTime + " ms", i && l.close(i), void("function" == typeof n.done && n.done(t, e, t[r.countName])))
                },
                error: function (e, t) {
                    a.layMain.html('<div class="' + f + '">数据接口请求异常</div>'), a.renderForm(), i && l.close(i)
                }
            });
        } else if (n.data && n.data.constructor === Array) {
            if(null != startLoading){
                layer.close(startLoading);
                startLoading = null;
            }
            var s = {}, u = e * n.limit - n.limit;
            s[r.dataName] = n.data.concat().splice(u, n.limit), s[r.countName] = n.data.length, a.renderData(s, e, n.data.length), d(), "function" == typeof n.done && n.done(s, e, s[r.countName])
        }
    }
    ...
    
    d.render = function (e) {
        var t = new S(e);
        var r = c.call(t);
        // 当table初始化,并且没有设置初始页码时候n.page是boolean类型,其他情况n.page 是 object类型
        if(t.config.enabledCurrCookie === true && r.config.page === true){
            var page = {};
            //这里设置的页码主要作用是用于回显table的选中页码
            page.curr = getCurrCookie(e.id);
            r.config.page = page;
        }
        return r;
    }
});

3、开启刷新页面不重置页码,方法如下:

layui.use(['table'], function () {
   var table = layui.table; //元素操作
     table.render({
            elem: "#listTable",
            url: "${base}/document-receipt/page[#if signed??]?signed=${signed?string("true", "false")}[/#if]",
            page: true,
            loading: true,
            id: 'testReload',
            cols: [[
                {field: "id", title: "ID", width: '30%'},
                {field: "name", title: "名称", width: '40%'},
                {title: "操作", width: '30%', toolbar: "#operationBar", fixed: 'right', align:'center'}
            ]],
            enabledCurrCookie: true//开启table页码缓存,意思是开启刷新页面保留在当前页面
        });
 });

4、清除table页码缓存,方法如下:

$(".clear-btn").click(function () {
   //方法一:清除所有的table页码缓存
   clearCurrCookie();
   /*
   //方法二:清除特定table页面的缓存
   clearTableIdCurrCookie('testReload');
   */
});

5、js源码及demo下载
https://download.csdn.net/download/michean/11125252
链接:https://pan.baidu.com/s/1D6EYHMkhtME-1ASnkvBvQQ
提取码:k33d

  • 0
    点赞
  • 5
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值