页页码的前端显示的实现

页页码的前端显示的实现

原创  2016年08月16日 22:39:55
  • 1739

分页页码的前端显示实现

效果说明

准备做分页的时候滚回去找了一下之前写过的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
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值