<!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>
