问题描述: 我们在使用Layui插件进行分页会出现一个常见的问题。就是假如我们不用异步的方法进行分页获取后端的数据时，进行window.location.href进行跳转的进行后端分页。
会遇到: 切换页面的时候，点下一页后又自动跳回前一页的问题
原因:有一个curr属性,说是起始页,自己默认就是第一页。我们在进行页面跳转的时候，必须对其也进行动态的修改。这里我采用对 URL路径的分割方式进行拆分。
理论基础:
let url = document.location.toString();//获取url地址 let urlParmStr = url.slice(url.indexOf('?')+1);//获取问号后所有的字符串 let arr = urlParmStr.split('&');//通过&符号将字符串分割转成数组 let courseId = arr[0].split("=")[1];//获取数组中第一个参数 let unit_title=arr[1].split("=")[1];//第二个参数 unit_title=decodeURI(unit_title);//转码将解码方式unscape换为decodeURI，将中文参数获取 console.log(unit_title);
1. let url = document.location.toString();//获取url地址
打印的路径地址是: http://localhost:8080/boss/toBarManagement/1/7
2. 拆分阿拉伯数字 1 ，我这里的1是页码；7->是一页7个
var currentPage = 0 var url =document.location.toString(); var urlParmStr=url.slice(url.indexOf('t/')+2) var arr = urlParmStr.split('/') ->到这里打印出 1
3. 为分页的 curr 属性赋值
// 页面分页的js layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage , layer = layui.layer; //总页数低于页码总数 laypage.render({ elem: 'demo0' , count: list_1.length, limit: 7, curr:arr[0], jump: function (obj, first) { // 1.当前所在的页 currentPage=obj.curr if(!first){ window.location.href="/boss/toBarManagement/"+ currentPage+"/7" } }, }); });
完整代码:
var currentPage = 0 var url = document.location.toString(); var urlParmStr = url.slice(url.indexOf('t/') + 2) var arr = urlParmStr.split('/') console.log(arr[0]) console.log(list_1.length) // 页面分页的js layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage , layer = layui.layer; //总页数低于页码总数 laypage.render({ elem: 'demo0' , count: list_1.length, limit: 7, curr: arr[0], jump: function (obj, first) { // 1.当前所在的页 currentPage = obj.curr if (!first) { window.location.href = "/opening-platform/toHistoryOpeningManagement/" + currentPage + "/7" } }, }); });
