JQuery 分页简洁版

 针对分页的逻辑对于我们来说就是页面之间的切换，主要的逻辑就是获取点击的时候的页码数，把相关的数据动态的添加到相应的标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .out {
            width: 97%;
            height: 12.5%;
            line-height: 4;
            text-align: center;
            padding-right: 3%;
        }
        input{
            color: rgba(188,188,188,1);
            background: #FFFFFF;
            border: 1px solid #DCDCDC;
            line-height: 2;
            width: 6.5%;
        }
        #first{
            color: rgb(252,186,101);
        }
        #totle{
            color: rgb(252,186,101);
        }
        .content{
            width: 100%;
            height: 10%;
            margin-top: 6%;
            position: relative;
        }
        .content .page{
            width: 100%;
            height: 40%;
            text-align: center;
            display: none;
            position: absolute;
            top:10%;
            left:0;
        }
        .content .page:nth-child(1){
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="page">
            这是第一页
        </div>
        <div class="page">
            这是第二页
        </div>
        <div class="page">
            这是第三页
        </div>
        <div class="page">
            这是第四页
        </div>
        <div class="page">
            这是第五页
        </div>
        <div class="page">
            这是第六页
        </div>
    </div>
    <div class="out">
        <input type="button" id="home" value="首页" />
        <input type="button" id="last" value="上一页" />
        <input type="button" id="first" value="第1页" />
        <input type="button" id="next" value="下一页" />
        <input type="button" id="end" value="尾页" />
        <input type="button" id="totle" value="共5页" />
    </div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
   //添加点击事件
    var $this= $("#first");
    var totle = $(".page").length;
    $("#home").click(function () {
        $this.val("第1页");
        $(".page").hide();
        $(".page").eq(0).show();
    });
    $("#end").click(function () {
        var b= parseInt($(".page").length);
        $this.val('第'+b+'页');
        $('.page').hide();
        $('.page:eq('+(b-1)+')').show();
    });
    //总页数
     $("#totle").val("共"+parseInt(totle)+"页");
    //上一页
   $("#last").click(function () {
       var now = $("#first").val();
       var current = parseInt(now.replace(/[^0-9]/ig,""));
       if (current-1<=0){
           current = 2;
           alert("这已经是第一页了");
       }
       var a= current-1;
       $this.val('第'+a+'页');
       $('.page').hide();
       $('.page:eq('+(a-1)+')').show();
   });
   //下一页
   $("#next").click(function () {
       var now = $("#first").val();
       var current = parseInt(now.replace(/[^0-9]/ig,""));
       if (current>totle-1){
           current = totle-1;
           alert("这已经是第一页了");
       }
       var a= current+1;
       $this.val('第'+a+'页');
       $('.page').hide();
       $('.page:eq('+(a-1)+')').show();
   });


</script>
</html>

　　

posted @ 2017-03-15 09:26  童心虫鸣  阅读(139)  评论(0)    收藏  举报