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]);elsereturn 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

LayUI table 刷新页面不重置页码相关推荐

layui定时刷新页面
//十五秒刷新一次 window.reloadView = function () {window.location.reload();}setInterval('reloadView()',1500 ...
#{}不自动改参数类型_如何在不刷新页面的情况下改变URL
本文为饥人谷原创文章,首发于前端学习指南. 问没有具体业务场景的技术问题都是耍流氓,那在回答这个问题之前先简单介绍一下业务场景. 下午6点半,小 H写了一个下午的代码揉揉眼睛伸个懒腰,「今天终于能早 ...
vue国际化（不刷新页面）
本文介绍Vue如何做国际化,包括 vue-i18n, element ui 等国际化配置,搭配 vuex, localStorage使用,切换语言无需刷新页面. 说在前面的话项目基于@vue/cli ...
layui 父页面表格指定页码刷新
我的业务场景是列表中点击编辑,弹出表单,执行表单提交,成功后自动关闭弹窗,并将父页面中的表格定位到当前页码刷新数据. 需要在父页面中及子页面中同时设置才可生效子页面(弹出层)代码 $.ajax({u ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...
layUI table 按条件搜索结果整个页面刷新
layui table 按条件搜索结果整个页面刷新. 后台能进去,但是结果返回不回来,页面直接刷新解决:把 <button> 换成 < input type=button/> ...
layui table数据渲染页面+筛选医生+在筛选日期一条龙2
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
layui让当前页面刷新_layui怎么刷新当前页面？
layui怎么刷新当前页面?下面本篇文章给大家介绍一下layui提交成功之后刷新当前页.关闭当前页.刷新父页.重载父页数据表格的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

LayUI table 刷新页面不重置页码

LayUI table 刷新页面不重置页码相关推荐

最新文章

热门文章