LayUI table 刷新页面不重置页码

悠悠 2022-02-20 06:19 1173阅读 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_download.csdn.net_download_michean_11125252]  
链接：https://pan.baidu.com/s/1D6EYHMkhtME-1ASnkvBvQQ  
提取码：k33d

[https_download.csdn.net_download_michean_11125252]: https://download.csdn.net/download/michean/11125252