如何解决分页功能点击下一页后再点击浏览器后退功能没办法回到上一页的问题？-duidaima 堆代码

如何解决分页功能点击下一页后再点击浏览器后退功能没办法回到上一页的问题？

发布于 2个月前
 316 热度

 0 评论

桃花易落
0 粉丝 22 篇博客

之前我们在写表格和翻页的时候，可能写成这样：
前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆代码 duidaima.com</title>
</head>
<body>
    <table id="dy_tb" border="1" cellspacing="0">
        <tr>
            <td>序号</td>
            <td>书名</td>
            <td>作者</td>
            <td>发行时间</td>
        </tr>
    </table>
    <button id="prev">上一页</button>
    <button id="next">下一页</button>
    <script>
        let pageNum=1;
        let oTb = document.getElementById("dy_tb");
        let oPrev = document.getElementById("prev");
        let oNext = document.getElementById("next");
        let init
        // 定义获取表格数据函数
        function getTableData(pageIndex){
            let request = new XMLHttpRequest();
            request.onreadystatechange = function(){
                if(this.readyState !== 4){
                    return;
                }
                if(this.status >= 200 && this.status < 300 || this.status === 304){
                    renderDataToTable(request.responseText)
                }
            }
            request.open("GET", `/getData?page=${pageIndex}&limit=4`, true);
            request.send(null);
        }

        function renderDataToTable(data_str){
            let jsonData = JSON.parse(data_str)
            let str = `<tr>
                <td>序号</td>
                <td>书名</td>
                <td>作者</td>
                <td>发行时间</td>
            </tr>`
            for(let d of jsonData){
                str += `<tr><td>${d.index}</td>
                <td>${d.name}</td>
                <td>${d.author}</td>
                <td>${d.publish}</td></tr>`
            }
            oTb.innerHTML = str
        }
        oPrev.addEventListener("click", () => {
            oNext.removeAttribute('disabled') // 移除下一页的禁用状态
            pageNum -= 1
            if(pageNum === 0){
                pageNum=1
            }else if(pageNum === 1){
                oPrev.setAttribute('disabled', true) // 设置上一页为禁用状态
                getTableData(pageNum)
            }else{
                getTableData(pageNum)
            }
        })

        
        oNext.addEventListener("click", () => {
            oPrev.removeAttribute('disabled') // 移除上一页的禁用状态
            pageNum += 1
            window.history.pushState({page: pageNum}, null, window.location.href)
            if(pageNum > 3){
                pageNum = 3                
            }else if(pageNum === 3){
                oNext.setAttribute('disabled', true) // 设置下一页为禁用状态
                getTableData(pageNum)
            }else{
                getTableData(pageNum)
            }
        })
        getTableData(pageNum) // 加载页面第一页数据
        oPrev.setAttribute('disabled', true) // 设置上一页为禁用状态

        window.addEventListener('popstate',(e) => {
            let page = 1;
            if(e.state !== null){
                page = e.state.page
            }
            getTableData(page)
            pageNum = page
        })
</script>
</body>
</html>

后端代码

from flask import Flask,render_template,request, jsonify
import time

app = Flask(__name__)

# 虚拟数据
BOOK_DATA = [
    [
        {"index":1, "name":"书名-1", "author":"作者-1","publish":"2023-05-01"},
        {"index":2, "name":"书名-2", "author":"作者-2","publish":"2023-05-02"},
        {"index":3, "name":"书名-3", "author":"作者-3","publish":"2023-05-03"},
        {"index":4, "name":"书名-4", "author":"作者-4","publish":"2023-05-04"},
    ],
    [
        {"index":5, "name":"书名-5", "author":"作者-5","publish":"2023-05-05"},
        {"index":6, "name":"书名-6", "author":"作者-6","publish":"2023-05-06"},
        {"index":7, "name":"书名-7", "author":"作者-7","publish":"2023-05-07"},
        {"index":8, "name":"书名-8", "author":"作者-8","publish":"2023-05-08"},
    ],
    [
        {"index":9, "name":"书名-9", "author":"作者-9","publish":"2023-05-09"},
        {"index":10, "name":"书名-10", "author":"作者-10","publish":"2023-05-10"},
        {"index":11, "name":"书名-11", "author":"作者-11","publish":"2023-05-11"},
        {"index":12, "name":"书名-12", "author":"作者-12","publish":"2023-05-12"},
    ]
]


@app.route('/')
def index():
    return render_template('index.html')

@app.route("/getData", methods=["GET"]) # /getData?page=${pageIndex}&limit=4
def getData():
    # 获取前端传递的页码参数
    page = request.args.get("page")
    int_page = int(page)
    data=BOOK_DATA[int_page-1]
    return jsonify(data)
if __name__ == '__main__':
    app.run(host="0.0.0.0", port=8765, debug=True)

但是上面的情况，点击下一页之后，点击浏览器后退的时候，就没有办法回到上一页，效果大概是这样

后来查阅资料，可以通过pushState这个api兼容浏览器上一页和下一页的问题，这个时候，就要把前端代码修改成这样。其他基本都一样，只是添加了74行、87-94行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆代码 duidaima.com</title>
</head>
<body>
    <table id="dy_tb" border="1" cellspacing="0">
        <tr>
            <td>序号</td>
            <td>书名</td>
            <td>作者</td>
            <td>发行时间</td>
        </tr>
    </table>
    <button id="prev">上一页</button>
    <button id="next">下一页</button>
    <script>
        let pageNum=1;
        let oTb = document.getElementById("dy_tb");
        let oPrev = document.getElementById("prev");
        let oNext = document.getElementById("next");
        let init
        // 定义获取表格数据函数
        function getTableData(pageIndex){
            let request = new XMLHttpRequest();
            request.onreadystatechange = function(){
                if(this.readyState !== 4){
                    return;
                }
                if(this.status >= 200 && this.status < 300 || this.status === 304){
                    renderDataToTable(request.responseText)
                }
            }
            request.open("GET", `/getData?page=${pageIndex}&limit=4`, true);
            request.send(null);
        }

        function renderDataToTable(data_str){
            let jsonData = JSON.parse(data_str)
            let str = `<tr>
                <td>序号</td>
                <td>书名</td>
                <td>作者</td>
                <td>发行时间</td>
            </tr>`
            for(let d of jsonData){
                str += `<tr><td>${d.index}</td>
                <td>${d.name}</td>
                <td>${d.author}</td>
                <td>${d.publish}</td></tr>`
            }
            oTb.innerHTML = str
        }
        oPrev.addEventListener("click", () => {
            oNext.removeAttribute('disabled') // 移除下一页的禁用状态
            pageNum -= 1
            if(pageNum === 0){
                pageNum=1
            }else if(pageNum === 1){
                oPrev.setAttribute('disabled', true) // 设置上一页为禁用状态
                getTableData(pageNum)
            }else{
                getTableData(pageNum)
            }
        })

        
        oNext.addEventListener("click", () => {
            oPrev.removeAttribute('disabled') // 移除上一页的禁用状态
            pageNum += 1
            window.history.pushState({page: pageNum}, null, window.location.href)
            if(pageNum > 3){
                pageNum = 3                
            }else if(pageNum === 3){
                oNext.setAttribute('disabled', true) // 设置下一页为禁用状态
                getTableData(pageNum)
            }else{
                getTableData(pageNum)
            }
        })
        getTableData(pageNum) // 加载页面第一页数据
        oPrev.setAttribute('disabled', true) // 设置上一页为禁用状态

        window.addEventListener('popstate',(e) => {
            let page = 1;
            if(e.state !== null){
                page = e.state.page
            }
            getTableData(page)
            pageNum = page
        })
</script>
</body>
</html>

这个时候，点击下一页之后，再点击浏览器后退按钮的时候，就可以退回到上一页的关联效果。下面是效果

 用户评论

其它前端技术
 59 成员 |  308 话题
+我要提问 +随便写写

可能感兴趣的话题

在前端中，什么是幽灵依赖？

JavaScript注释：单行注释和多行注释详解

如何合理利用WebSocket提升应用的实时性和用户体验

你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗？