【（不用Ajax）解决 Layui 插件分页点下一页后又自动跳回前一页的问题】

news2024/11/16 6:55:02

问题描述: 我们在使用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"
                }
            },
        });
    });