LayUI table 刷新页面不重置页码
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('+ f + '">' + (t[r.msgName] || "返回的数据状态异常") + "")) : (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('+ f + '">数据接口请求异常'), 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