练手：原生js（部分jquery）写一个前端页面分页功能

最新推荐文章于 2024-05-09 08:24:21 发布

老板上菜！

最新推荐文章于 2024-05-09 08:24:21 发布

阅读量743

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_55870308/article/details/125200522

版权

准备一个获取数据的接口

–注–：页面可能有点简陋，我们这里主要写如何操作dom来实现分页的功能。
这里我是用node搭建了一个简易的服务器，用来给前端发送数据：

const express = require("express");
const app = express();
// 解决跨域
const cors = require('cors')
app.use(cors());
// 这里是我们的数据
let user = [
    {
        name:"张三"
    },
    {
        name:"李四"
    },
    {
        name:"王二"
    },
    {
        name:"李五"
    },
    {
        name:"make"
    },
    {
        name:"two"
    },
    {
        name:"three"
    },
    {
        name:"four"
    },
    {
        name:"five"
    },
    {
        name:"six"
    },
    {
        name:"ele"
    },
    {
        name:"poi"
    },
    {
        name:"Yheii"
    },
    {
        name:"Ojjn"
    },
    {
        name:"Pdwd"
    },
    {
        name:"Iuijn"
    },
    {
        name:"Wfaf"
    },
    {
        name:"Ldad"
    },
    {
        name:"IOp"
    },
    {
        name:"NKO"
    },
    {
        name:"1122"
    },
    {
        name:"3344"
    },
    {
        name:'5566'
    },
    {
        name:"7788"
    },
    {
        name:"9900"
    },
    {
        name:"ooop"
    },
    {
        name:"164d"
    },
    {
        name:'164d4w'
    },
    {
        name:"dwad1"
    },
    {
        name:"pkoih"
    },
    {
        name:"ooop"
    },
    {
        name:"164d"
    },
    {
        name:'164d4w'
    },
    {
        name:"dwad1"
    },
    {
        name:"pkoih"
    }
]
app.get("/user",(req,res)=>{
    console.log("访问呢");
    let userList = JSON.stringify(user)
    res.send(userList);
})
app.listen(80,()=>{
    console.log("run serve http://localhost");
})

接下来就是写我们前端的页面（页面比较简陋）：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    #All {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #List ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100px;
    }

    #Page {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #Page ul {
        display: flex;

    }

    #Page ul li {
        text-align: center;
        width: 30px;
    }

    .active {
        background-color: aqua;
    }

    #Page h5 {
        cursor: pointer;
        background-color: antiquewhite;
        width: 70px;
        text-align: center;
        border-radius: 5px;
    }

    #pages li {
        cursor: pointer;
        border-radius: 5px;
    }
</style>

<body>
    <div id="All">
        <div id="List">
            <ul id="user">

            </ul>
        </div>
        <div id="Page">
            <h5 id="previousPage">上一页</h5>
            <ul id="pages">
            </ul>
            <h5 id="nextPage">下一页</h5>
        </div>
    </div>
</body>

效果：
在这里插入图片描述
接下来就是我们逻辑的实现（详细看注释）：

// 定义一个全局储存获取到的数据
    let data = null;
    // 立即执行函数
    (function () {
        // 获取接口数据
        $.ajax({
            async: false,
            url: "http://localhost/user",
            type: "get",
            success: function (res) {
                let da = JSON.parse(res)
                data = da;
            },
            error: function (err) {
                console.log(err);
            }
        })
        // 获取分页
        page();
        // 开始展示的数据
        beginData();
        // 当点击不同页码时，刷新数据
        changeDate();
        // 隐藏页码
        hidePage();
        // 点击下一页
        nextPage();
        // 点击上一页
        previousPage();
    })()

    // 获取分页页数
    function page() {
        let pages = document.getElementById("pages");
        // 页码数
        let page = data.length / 5;
        // 先展示所有的页码数
        for (let i = 1; i <= page; i++) {
            let li = document.createElement("li")
            li.innerHTML = i;
            pages.appendChild(li);
        }
    }
    // 只显示4个页码，其余隐藏
    function hidePage() {
        let pages = document.getElementById("pages");
        let chiNode = pages.children;
        for (let i = 0; i < chiNode.length; i++) {
            // 隐藏超过4个的页码
            if (i > 3) {
                chiNode[i].style.display = "none";
            }
        }
    }
    // 点击下一页时
    function nextPage() {
        let pages = document.getElementById("pages");
        let nextPage = document.getElementById("nextPage");
        let chiNode = pages.children;
        nextPage.addEventListener("click", function () {
            try {
                // 显示下一页码
                for (let i = chiNode.length - 1; i > 0; i--) {
                    if (chiNode[i].style.display != "none") {
                        chiNode[i + 1].style.display = "block";
                    }
                }
                // 隐藏开头的页码
                for (let i = 0; i < chiNode.length; i++) {
                    if (chiNode[i].style.display != "none") {
                        chiNode[i].style.display = "none";
                        break;
                    }
                }
            } catch (error) {
                console.log("到底啦");
            }
        })
    }
    // 点击上一页时
    function previousPage() {
        let pages = document.getElementById("pages");
        let previousPage = document.getElementById("previousPage");
        let chiNode = pages.children;
        previousPage.addEventListener("click", function () {
            try {
                // 显示上一页码
                for (let i = 0; i < chiNode.length; i++) {
                    if (chiNode[i].style.display != "none") {
                        chiNode[i - 1].style.display = "block";
                    }
                }
                // 隐藏结尾数据
                for (let i = chiNode.length - 1; i >= 0; i--) {
                    if (chiNode[i].style.display != "none") {
                        chiNode[i].style.display = "none";
                        break;
                    }
                }
            } catch (error) {
                console.log("到头啦");
            }
        })
    }
    // 一开始展示五条数据,并页码1选中
    function beginData() {
        // 显示前五条数据
        let user = document.getElementById("user");
        for (let i = 0; i < 5; i++) {
            let li = document.createElement("li");
            li.innerHTML = data[i].name;
            user.appendChild(li);
        }
        // 选中第一条页码,给他加上active
        let pages = document.getElementById("pages");
        let li = pages.children;
        li[0].classList.add("active");
    }

    // 当点击不同页数，展现对应数据
    function changeDate() {
        // 获取页码元素
        let pages = document.getElementById("pages");
        // 获取列表元素
        let user = document.getElementById("user");
        let node = pages.children;
        for (let i = 0; i < node.length; i++) {
            node[i].addEventListener("click", function () {
                // 在刷新下一个页面数据的时候，先将之前的数据清楚然后覆盖之前的数据
                $("#user").empty();
                for (let i = 0; i < node.length; i++) {
                    node[i].classList.remove("active")
                }
                node[i].classList.add("active")
                let pageNum = Number(node[i].textContent);
                // 数据开始的位置索引
                let headIndex = (pageNum - 1) * 5;
                // 数据结束时的索引
                let lastIndex = pageNum * 5;
                // 为当前选中页码添加对应数据
                for (let i = headIndex; i < lastIndex; i++) {
                    let li = document.createElement("li");
                    li.innerHTML = data[i].name;
                    user.appendChild(li);
                }
            })
        }
    }

总体效果演示：
在这里插入图片描述

这里我们只是做了分页操作的一种实现方式，实现分页功能还有其他很多种方式。

老板上菜！

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
练手：原生js（部分jquery）写一个前端页面分页功能

–注–：页面可能有点简陋，我们这里主要写如何操作dom来实现分页的功能。这里我是用node搭建了一个简易的服务器，用来给前端发送数据：接下来就是写我们前端的页面（页面比较简陋）：效果：接下来就是我们逻辑的实现（详细看注释）：总体效果演示：...
复制链接

扫一扫