【免费】javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能

共6个文件

css：2个

woff：1个

js：1个

需积分: 0 13 浏览量更新于2023-02-23 收藏 137KB ZIP 举报

当表格数据太多时，通常需要做成分页。本资源使用javascript实现了一个页码器，满足常规要求：切换页码、分页、上一页/下一页、页码超出时显示省略号，点击省略号往前/后显示几个隐藏的页码，使用方法见https://blog.csdn.net/sxww_zyt/article/details/129155819

收起资源包目录

pageDemo.zip （6个子文件）

pageDemo

css

elementUiIndex.css 752KB

index.css 3KB

fonts

element-icons.woff 24KB

element-icons.ttf 49KB

page.js 8KB

index.html 7KB

资源推荐

资源预览

资源评论

<html lang=""> <head> <link rel="stylesheet" type="text/css" href="./css/elementUiIndex.css" /> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <title> javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能 </title> <script src="./page.js"></script> </head> <body> <div class="container"> <div class="title">执行结果</div> <div class="search-result"> <div class="table-content-fixed"> <table cellspacing="0"> <thead> <tr> <th width="125px">姓名</th> <th width="125px">年龄</th> <th width="125px">学号</th> <th width="125px">地址</th> <th width="125px">成绩</th> </tr> </thead> </table> </div> <div class="table-content-scroll"> <table cellspacing="0"> <tbody></tbody> </table> </div> </div> <div role="pagination" aria-label="pagination" class="el-pagination pagination hort-box" data-v-b770da44="" > <span class="el-pagination__total"></span> <button type="button" class="btn-prev" onclick="handlePageChange('prev')" > <i class="el-icon el-icon-arrow-left"></i> </button> <ul class="el-pager"></ul> <button type="button" class="btn-next" onclick="handlePageChange('next')" > <i class="el-icon el-icon-arrow-right"></i> </button> </div> </div> </body> <script> let currentPage = 1; let pageCount = 8; let rowCount = 78; // 获取运行数据 function getRunData() { // 处理滚动条引起的宽度默认无滚动条 document.getElementsByClassName("table-content-fixed")[0].style = ""; // 获取数据 let runDataList = [ { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, { name: "张三", age: "18", studentNo: "01", address: "", point: "98", }, ]; // 处理滚动条引起的宽度长度大于9出现滚动条 if (runDataList.length > 9) { document.getElementsByClassName("table-content-fixed")[0].style = "width:calc(100% - 8px)"; } // 清空执行结果 let tbody = document.getElementsByTagName("tbody")[0]; tbody.innerHTML = ""; // 挂载执行结果 runDataList.forEach((item, index) => { let tr = document.createElement("tr"); for (let key in item) { let td = document.createElement("td"); td.width = "125px"; td.innerHTML = item[key]; tr.appendChild(td); } tbody.append(tr); }); } // 初始化页码 function initPage() { setPage( pageCount, rowCount, "container", function (newPageObj) { receivePageCallBack(newPageObj); } ); } // 页码器跳转 function handlePageChange(val) { let numberDomLists = document.getElementsByClassName("number"); if (val === "prev") { currentPage--; if (currentPage > 1) { if (numberDomLists[1].innerText > currentPage) { linkPrevPage( document.getElementsByClassName("btn-quickprev")[0], numberDomLists, pageCount, document.getElementsByClassName("container")[0], function (newPageObj) { receivePageCallBack(newPageObj); } ); } } } else if (val === "next") { currentPage++; if (currentPage < pageCount) { if ( numberDomLists[numberDomLists.length - 2].innerText < currentPage ) { linkNextPage( document.getElementsByClassName("btn-quicknext")[0], numberDomLists, pageCount, document.getElementsByClassName("container")[0], function (newPageObj) { receivePageCallBack(newPageObj); } ); } } } let targetPage = getElementsByAttr( "container", "number", "key", currentPage ); targetPage[0] && targetPage[0].onclick(); } // 页码器回调 function receivePageCallBack(newPageObj) { currentPage = newPageObj.newPage; if (!newPageObj.flag) { document .getElementsByClassName("btn-prev")[0] .removeAttribute("disabled"); document .getElementsByClassName("btn-next")[0] .removeAttribute("disabled"); if (currentPage == pageCount) { selectLastPage( pageCount, "container", function (newPageObj2) { receivePageCallBack(newPageObj2); } ); } else if (currentPage == 1) { initPage(); } getRunData(); console.log(currentPage); } else { let numberDomLists = document.getElementsByClassName("number"); numberDomLists[numberDomLists.length - 2].onclick(); } } function run() { getRunData(); initPage(); } window.onload = function () { run(); }; </script> </html>