页页码的前端显示的实现
分页页码的前端显示实现
效果说明
准备做分页的时候滚回去找了一下之前写过的demo结果被自己写的丑哭了(大概长这样):
主要是不符合现在一般网站的跳转习惯,自己用着都觉得不方便,所以重新写了一下新的分页的前端(顿时觉得舒服了许多):
js思路
首先要明确,只需要知道当前页是第几页以及总页数理论上就可以去判断前端到底是怎么显示的。(分别是currentPage与pageNum)
那么接下来需要确定基本的显示例子。
特征:最前是上一页的按钮,最后是下一页的按钮。中间最多有7个按钮+两个省略号,根据情况的不同需要隐藏不同的部分
具体的简单的html<置于body中>:
<button class="btn" id="prePage">上一页</button>
<button class="btn" id="btn1">1</button>
<span id="prePoint">...</span>
<button class="btn" id="btn2"></button>
<button class="btn" id="btn3"></button>
<button class="btn" id="btn4"></button>
<button class="btn" id="btn5"></button>
<button class="btn" id="btn6"></button>
<span id="sufPoint">...</span>
<button class="btn" id="btn7"></button>
<button class="btn" id="sufPage">下一页</button>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
然后是js(这里用的依然是jquery):
$(function(){
var currentPage=Number(20);
var pageNum=Number(50);
//给每个button赋值(第一个默认为1)
$("#btn2").text(currentPage-2);
$("#btn3").text(currentPage-1);
$("#btn4").text(currentPage);
$("#btn5").text(currentPage+1);
$("#btn6").text(currentPage+2);
$("#btn7").text(pageNum);
//可改变当前页的button样式
$("#btn4").css("background-color","#ff6384");
//先处理"上一页"和"下一页"的情况
if(currentPage==1) //如果当前页为首页
{
$("#prePage").hide();
}
if(currentPage==pageNum) //如果当前页为末页
{
$("#sufPage").hide();
}
//处理当前页小于等于3的特殊情况
if(currentPage<=3){
$("#prePoint").hide();
$("#btn1").hide();
}//当前页是4还需要hide掉第一个省略号按钮(!重要)
else if(currentPage==4){
$("#prePoint").hide();
}
//当前页是1还需要hide掉第二第三个按钮
if(currentPage==1)
{
$("#btn2").hide();
$("#btn3").hide();
}
//当前页是2则也需要hide掉第二个按钮(此时为-1)
else if(currentPage==2)
{
$("#btn2").hide();
}
//最末端的特殊情况处理和最前端是一样的
if(currentPage>=pageNum-2){
$("#sufPoint").hide();
$("#btn7").hide();
}
else if(currentPage==pageNum-3){
$("#sufPoint").hide();
}
if(currentPage==pageNum)
{
$("#btn5").hide();
$("#btn6").hide();
}
if(currentPage==pageNum-1)
{
$("#btn6").hide();
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
完整的代码
css
ul{
height:100%;
list-style-type:none;
}
li{
line-height:40px;
float:left;
}
.page_btn{
border-radius:4px;
border:1px solid #e5e9ef;
background:#fff;
margin-right:10px;
text-align:center;
width:38px;
height:38px;
line-height: 8px;
margin-top:6px;
outline:0;
}
.page_btn:hover{
border:1px solid #4f90fb;
color:#4f90fb;
}
span.pages_span{
margin-right:10px;
width:38px;
height:38px;
position:relative;
top:10px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
html
<ul>
<li class="page_li">
<button class="page_btn" style="width:100px" id="prePage">上一页</button>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn1">1</button>
</li>
<li class="page_li">
<span class="pages_span" id="prePoint">...</span>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn2"></button>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn3"></button>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn4"></button>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn5"></button>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn6"></button>
</li>
<li class="page_li">
<span class="pages_span" id="sufPoint">...</span>
</li>
<li class="page_li">
<button class="page_btn" id="page_btn7"></button>
</li>
<li class="page_li">
<button class="page_btn" style="width:100px" id="sufPage">下一页</button>
</li>
</ul>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
js
$(function(){
var currentPage=Number(20);
var pageNum=Number(50);
$("#page_btn2").text(currentPage-2);
$("#page_btn3").text(currentPage-1);
$("#page_btn4").text(currentPage);
$("#page_btn5").text(currentPage+1);
$("#page_btn6").text(currentPage+2);
$("#page_btn7").text(pageNum);
$("#page_btn4").css("background-color","#4f90fb");
$("#page_btn4").css("border","1px solid #ddd");
$("#page_btn4").css("color","#fff");
if(currentPage==1)
{
$("#prePage").hide();
}
if(currentPage==pageNum)
{
$("#sufPage").hide();
}
if(currentPage<=3){
$("#prePoint").hide();
$("##page_btn1").hide();
}
else if(currentPage==4){
$("#prePoint").hide();
}
if(currentPage==1)
{
$("##page_btn2").hide();
$("##page_btn3").hide();
}
else if(currentPage==2)
{
$("##page_btn2").hide();
}
if(currentPage>=pageNum-2){
$("#sufPoint").hide();
$("##page_btn7").hide();
}
else if(currentPage==pageNum-3){
$("#sufPoint").hide();
}
if(currentPage==pageNum)
{
$("#page_btn5").hide();
$("#page_btn6").hide();
}
if(currentPage==pageNum-1)
{
$("#page_btn6").hide();
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bobbyzyl12/article/details/52225716