<!DOCTYPE html><html> <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>Document</title></head> <body> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { min-width: 830px; } a { font-size: 18px; font-family: "微软雅黑", "宋体"; color: #4e6ef2; text-decoration: revert; } input { outline: none; } input[type=text]:focus { outline: none; border: 2px solid rgb(18, 123, 209); } .box { width: 100%; height: 100%; position: relative; } .hearBox { box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1); height: 70px; padding-left: 20px; position: fixed; top: 0; z-index: 1; background: #fff; width: 100%; } .logo { width: 110px; height: 70px; float: left; padding: 10px 0px 10px 0px; } .boxSearch { width: 672px; height: 70px; margin-left: 124px; padding-top: 15px; } .searchIput { width: 558px; height: 40px; border: 2px solid #c4c7ce; border-radius: 10px 0 0 10px; border-right: 0; overflow: visible; float: left; padding-left: 15px; font-size: 18px; } .searchBtn { cursor: pointer; width: 114px; height: 40px; line-height: 41px; line-height: 40px\9; background-color: #4e6ef2; border-radius: 0 10px 10px 0; font-size: 17px; box-shadow: none; font-weight: 400; border: 0; outline: 0; letter-spacing: normal; float: right; color: #fff; text-align: center; } .control { padding-top: 70px; background: #fff; position: relative; padding-left: 150px; width: 700px; } .controlBox { margin-top: 15px; } p { margin: 0px; font-family: Arial; } p.title { padding-bottom: 0px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4e6ef2; } p.CWJL { padding-bottom: 0px; font-size: 18px; color: #4e6ef2; word-break: break-all; overflow: hidden; } p.content { padding-top: 4px; font-size: 13px; line-height: 18px; color: #000000; letter-spacing: 1px; padding-left: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span.search { color: #c60a00; } p.link { padding-top: 4px; padding-left: 5px; font-size: 13px; color: #008000; } span.quick { color: #666666; text-decoration: underline; } #cover { background: black; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; display: none; z-index: 20; filter: alpha(opacity=60); opacity: 0.7; } #modal { position: absolute; width: 324px; height: 324px; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; z-Index: 9999; } .modalinmg { width: 324px; height: 324px; } img { width: 100%; height: 100%; } #pageNum { text-align: center; margin-left: 5px; margin-right: 5px; } .pagination { width: 100%; height: 64px; background-color: #F5F5F6; margin: 30px 0 0; padding-left: 150px; padding-top: 15px; } li { list-style: none; } .pagination li { float: left; font-size: 16px; text-align: center; cursor: pointer; padding: 0 5px; margin: 0 5px; border: 0; width: 36px; color: #3951B3; height: 36px; line-height: 36px; background: #fff; border-radius: 5px; } .pagination .selected-act { background: #3951B3; border-radius: 5px; color: #fff; } .pagination .change-page { font-size: 16px; width: 80px; text-align: center; float: left; cursor: pointer; margin: 0 20px; height: 36px; border: 0; border-radius: 6px; background-color: #fff; color: #3951B3; line-height: 36px; padding: 0px 5px 0px 5px; } .forbid-click { display: none; } </style> <section class="box"> <div class="hearBox"> <div class="logo"> <img src="./1.png" alt=""> </div> <div class="boxSearch"> <input id="param" type="text" class="searchIput"> <button id="cx" class="searchBtn">一键搜索</button> </div> </div> <div class="control" id="control"> <div class="controlBox"> <p class="title"><a href="javascript:void(0);" onclick="openRoles('B5A28517D9DDC08EE053ACA80A07C08E' , 'V_CGLYXT_DYQ');return false;"><span class="search">1</span></a></p> <p class="content">此条记录房地坐落为 : 空</p> <p class="content">不动产单元号 : 4401525252252505252520000000</p> <p class="content">权利人名称 : <span class="search">1</span></p> <p class="link">登记类型 : 空</p> </div> <div class="controlBox"> <p class="title"><a href="javascript:void(0);" onclick="openRoles('B5A28517D9DDC08EE053ACA80A07C08E' , 'V_CGLYXT_DYQ');return false;"><span class="search">1</span></a></p> <p class="content">此条记录房地坐落为 : 空</p> <p class="content">不动产单元号 : 44011352525252525200</p> <p class="content">权利人名称 : <span class="search">1</span></p> <p class="link">登记类型 : 空</p> </div> </div> </section> <div class="pagination"> <div class="pre-page change-page forbid-click"> < 上一页 </div> <ul class="pagination-ul"> </ul> <div class="next-page change-page"> 下一页 > </div> </div> </body><script src="./jquery-3.2.1.min.js"></script><script> var currentPage,totalPage; //当前页数,总页数 // $(document).ready(function () {// //初始加载赋值当前页和总页数 currentPage = 0; totalPage = 100; pagingFunc(currentPage, totalPage);// }); //分页函数function pagingFunc(currentPage, totalPage) { var pNs = ""; //显示当前所有页码的数组 var pageArray = []; //总页数小于11页的情况 if (totalPage < 11) { for(var i = 0;i < totalPage; i++){ pageArray.push(i + 1); } }else if (currentPage > 5 && (totalPage - currentPage) > 3) { //当前页大于5且总页数减当前页大于3 pageArray = [currentPage-5, currentPage-4, currentPage-3, currentPage-2, currentPage-1, currentPage, currentPage+1, currentPage+2, currentPage+3, currentPage+4] }else if (currentPage > 5 && (totalPage - currentPage) < 4) { //当前页大于5且总页数减当前页小于4 pageArray = [totalPage-9, totalPage-8, totalPage-7, totalPage-6, totalPage-5, totalPage-4, totalPage-3, totalPage-2, totalPage-1, totalPage] }else if (currentPage < 6 && totalPage > 9) { //当前页小于6且总页数大于9 for(var i = 0;i < 10; i++){ pageArray.push(i + 1); } } //当前页对应的页码加高亮 for(var h = 0;h < pageArray.length; h++){ if(pageArray[h]-1 == currentPage){ pNs += '<li class="selected-act">'+ pageArray[h] +'</li>'; }else{ pNs += '<li>'+ pageArray[h] +'</li>'; } } $(".pagination-ul").html(pNs); // 显示隐藏上一页和下一页 if (currentPage == 0) { //如果当前页等于1上一页按钮隐藏 $(".pre-page").addClass('forbid-click'); $(".next-page").removeClass('forbid-click'); } else if (currentPage+1 == totalPage) { //如果当前页等于总页数隐藏下页 $(".next-page").addClass('forbid-click'); $(".pre-page").removeClass('forbid-click'); } else {//以上条件都不满足则所有按钮均可点击 $('.pre-page').removeClass('forbid-click'); $('.next-page').removeClass('forbid-click'); } if($('.pagination li').length ==1) { //如果当前页只有一页 $(".next-page").addClass('forbid-click'); $(".pre-page").addClass('forbid-click'); }} //点击页码$(".pagination").on("click","li",function(){ currentPage = parseInt($(this).text()); pagingFunc(currentPage-1, totalPage); console.log(currentPage-1)});//点击上一页按钮$('.pre-page').click(function(){ currentPage--; pagingFunc(currentPage, totalPage); console.log(currentPage)});//点击下一页按钮$('.next-page').click(function(){ currentPage++; pagingFunc(currentPage, totalPage); console.log(currentPage)}); </script> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现