分页功能（jQuery+bootstrap）

效果
在这里插入图片描述

pagesManage.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkhref="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css"rel="stylesheet"/><!-- jQuery and JavaScript Bundle with Popper --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script><link rel="stylesheet" href="./font/iconfont.css" /><link rel="stylesheet" href="./css/my_alert.css" /><link rel="stylesheet" href="./css/pagesManage.css" /></head><body><div class="divAll"><!-- 面包屑导航 --><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">系统设置</a></li><li class="breadcrumb-item active" aria-current="page">页面信息管理</li></ol></nav><div class="behavior mb-3 ml-3"><button class="btn btn-info" onclick="search()">搜索</button><button class="btn btn-primary" onclick="add()">新增</button></div><table class="table"><thead><th>序号</th><th>页面名称</th><th>页面路径</th><th>备注</th><th>父级页面</th><th>操作</th></thead><tbody class="tShow"></tbody></table><!-- 分页 --><div class="pager ml-3"><selectname=""id=""class="form-control mr-2"onclick="changePageSize(this)"><option value="5">5条/页</option><option value="10">10条/页</option><option value="20">20条/页</option></select><nav aria-label="Page navigation"><ul class="pagination"><!-- <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li> --></ul></nav><label for="" id="currentPageDom" class="mr-3 ml-3">当前第【x】页</label><label for="" id="totalCountDom">共【x】条</label></div></div><!-- 警告框 --><div class="my_alert"><div class="alert alert-success alert-dismissible" role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="msgText">xxxx</div></div><div class="alert alert-danger alert-dismissible" role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="msgText">xxxx</div></div><div class="alert alert-warning alert-dismissible" role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="msgText">xxxx</div></div><div class="alert alert-info alert-dismissible" role="alert"><buttontype="button"class="close"data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="msgText">xxxx</div></div></div><!-- 模态框 --><divclass="modal fade"id="myModal"tabindex="-1"aria-labelledby="myModalLabel"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="myModalLabel">温馨提示</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">确认要退出吗？</div><div class="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">关闭</button><buttontype="button"class="btn btn-primary"onclick="exit()"data-dismiss="modal">确认退出</button></div></div></div></div></body><script src="./js/my_alert.js"></script><script src="./js/pagination.js"></script><script src="./js/pagesManage.js"></script><script>window.onload = function () {search();};</script>
</html>

pagesManage.js

var allData;
// 搜索所有页面信息（包含父级）
function search() {$.ajax({url: "http://localhost:3000/pages/pages_selectAllWithParent",success: (res) => {allData = res;// console.log(res);let tr = "";res.forEach((element) => {tr += `<tr><td>${element.id}</td><td>${element.pageName}</td><td>${element.pageUrl}</td><td>${element.remark}</td><td>${element.parentName}</td><td><button class="btn btn-info mr-2" οnclick="">编辑</button><button class="btn btn-danger mr-2" οnclick="">删除</button></td></tr>`;});$(".tShow").html(tr);// 展示页码showLi();// 默认选择第一页choosePage(1);},});
}

pagination.js

let pageSize = 5; // 默认页面条数
let currentPage = 1; // 默认当前页
let pageCount = 0; // 总页数// 改变页面条数
function changePageSize(e) {pageSize = $(e).val();showLi();choosePage(1);
}// 动态展示页数
function showLi() {pageCount =allData.length % pageSize == 0? allData.length / pageSize: Math.floor(allData.length / pageSize) + 1; // allData为所有数据，通过请求获取到$(".pagination").empty();var content = `<li class="page-item leftPage"><a href="javascript:leftPage()" class="page-link">&laquo;</a></li>`;for (let i = 1; i <= pageCount; i++) {content += `<li class="page-item ${currentPage === i ? "active" : ""}"><a href="javascript:choosePage(${i})" class="page-link" >${i}</a></li>`;}content += `<li class="page-item rightPage"><a href="javascript:rightPage()" class="page-link">&raquo;</a></li>`;$(".pagination").html(content);
}// 选择不同的页号展示不同数据
function choosePage(i) {// 移除当前激活的页码样式$(`.page-item.active`).removeClass("active");// 移除当前禁用样式$(`.page-item.disabled`).removeClass("disabled");currentPage = i;console.log(currentPage);// 为新的当前页码添加激活样式$(`.page-item:has(a[href="javascript:choosePage(${i})"])`).addClass("active");var startIndex = (currentPage - 1) * pageSize;var endIndex =currentPage * pageSize < allData.length? currentPage * pageSize - 1: allData.length - 1;var newData = [];for (let i = startIndex; i <= endIndex; i++) {newData.push(allData[i]);showData(newData);}// 获取要更新的标签元素const currentPageDom = document.getElementById("currentPageDom");const totalCountDom = document.getElementById("totalCountDom");// 更新标签内容currentPageDom.textContent = `当前第${currentPage}页`;totalCountDom.textContent = `共${allData.length}条`;
}function showData(data) {$(".tShow").html("");var content = ``;for (let i = 0; i < data.length; i++) {content += `<tr><td>${data[i].id}</td><td>${data[i].pageName}</td><td>${data[i].pageUrl}</td><td>${data[i].remark}</td><td>${data[i].parentName}</td><td><button class="btn btn-info mr-2" οnclick="">编辑</button><button class="btn btn-danger mr-2" οnclick="">删除</button></td></tr>`;}$(".tShow").html(content);
}function leftPage() {if (currentPage > 1) {currentPage--;choosePage(currentPage);// document.querySelector(".rightPage").classList.remove("disabled");$(".rightPage").removeClass("disabled");}if (currentPage == 1) {// document.querySelector(".leftPage").classList.add("disabled");$(".leftPage").addClass("disabled");}
}function rightPage() {console.log(pageCount, "pageCount");if (currentPage < pageCount) {currentPage++;choosePage(currentPage);// document.querySelector(".leftPage").classList.remove("disabled");$(".leftPage").removeClass("disabled");}if (currentPage == pageCount) {// document.querySelector(".rightPage").classList.add("disabled");$(".rightPage").addClass("disabled");}
}