简单的分页实现_分页按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80277784/article/details/136774723

文章目录

分页是管理系统中常见且必须要实现的功能，在前后端交互时，从接口中获得数据实现分页以及简单的分页渲染，分页的形式有很多种，第一次写，写一个最简单只有上下页两个按钮的切换。

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分页功能</title>
	</head>
	<body>
        <div class="container">
			<table class="showTable">
				<tr>
					<th>课程编号</th>
					<th>课程名称</th>
					<th>课程类别</th>
					<th>上课时间</th>
					<th>上课教室</th>
					<th>学分</th>
					<th>考核方式</th>
					<th class="action">操作详情</th>
				</tr>
				<tbody class="list"></tbody>
			</table>
        </div>
        <button class="prePage">上一页</button>
        <button class="nextPage">下一页</button>
	</body>
</html>

这是一个简单的表头加tbody空的表身，需要通过接口将后台数据渲染到表身里，利用接口来进行分页。下面是上下页的切换按钮，需要绑定js事件来实现切换。
在这里表格的css样式就不再写了，直接跳到js部分。

js部分

//offset是当前页数
//allpages是总页数
function getPage(offset) {
    $.ajax({
        url: `接口路径offset=${offset}`,
        type: "GET",
        headers: {
            token: localStorage.getItem('token'),
        },
        success: function (result) {
        //获取后台数据
            const stu = result.courseInfo;
            let tb = document.querySelector(".list");
            tb.innerHTML = ''; 
            // 清空表格内容
            //遍历数据并将每一条数据都显示在表格中
            for (let i = 0; i < stu.length; i++) {
                tb.innerHTML += `<tr data-id=${stu[i].id}>
                    <td>${i + 1}</td>
                    <td>${stu[i].courseName}</td>
                    <td>${stu[i].category}</td>
                    <td>${stu[i].attentClassTime}</td>
                    <td>${stu[i].classRoom}</td>
                    <td>${stu[i].creditHour}</td>
                    <td>$stu[i].assessmentMethod}</td>
                    <td><button class='btn btnEdit'><i class='iconfont icon-edit'>&#xe607;</i>编辑</button><button class='btn btnDelete'><i class='iconfont icon-delete'>&#xe60d;</i>删除</button></td>
                </tr>`;
            }
        },
        error: function () {
            console.error("请求失败，请重试");
        }
    });
}

//查询页数，条数
function Page() {
    $.ajax({
        url: '接口路径',
        type: 'GET',
        headers: {
            token: localStorage.getItem('token'),
        },
        success: function (result) {
        // 总条数
            let count = result.count; 
            let allPages = result.allPages;
            PageChange(count, allPages);
        },
        error: function (error) {
            console.error("请求失败，请重试");
        },
    });
}

function PageChange(count, allPages) {
    const prePageBtn = document.querySelector('.prePage');
    const nextPageBtn = document.querySelector('.nextPage');
    let offset = 1;
    // 初始化页面
    getPage(offset);

    // 禁用上一页按钮
    if (offset == 1) {
        prePageBtn.setAttribute("disabled", true);
    }

    // 禁用下一页按钮
    if (offset >= allPages) {
        offset = allPages;
        prePageBtn.setAttribute("disabled", true);
    }

    // 启用下一页按钮
    if (offset < allPages) {
        nextPageBtn.removeAttribute("disabled");
    }

    // 上一页按钮点击事件
    prePageBtn.onclick = function () {
        offset--;
        
        // 检查是否已经到达第一页
        if(offset <= 1){
            prePageBtn.setAttribute("disabled", true); 
            offset = 1;
        }
        
        // 获取页码内容
        getPage(offset);
        
        // 启用下一页按钮
        if(offset < allPages && offset >= 1){
            nextPageBtn.removeAttribute("disabled");
        }
    };

    // 下一页按钮点击事件
    nextPageBtn.onclick = function () {
        offset++;
        
        // 启用上一页按钮
        if(offset >= 1){
            prePageBtn.removeAttribute("disabled");
        }
        
        // 获取页码内容
        getPage(offset);
        
        // 检查是否已经到达最后一页
        if(offset >= allPages){
            offset = allPages;
            nextPageBtn.setAttribute("disabled", true);
        }
    };
}

在实现后台信息管理的增删改查时，进行数据渲染调用。不过我是基于我调用的接口进行编写，在具体实现时，还是要根据情况而定，这只是个简单的逻辑，仅供参考。而且这是我第一次写，肯定有不成熟的地方。
稍微复杂点的功能后续会进行研究，以上只是代码的一部分，需要与其他功能连接实现，当前展示的是一个思路，但是在使用时仅供参考，不一定都会实现。
接下来可能会研究一些样式设计。