分页（前端）

本分页没有跳转，要添加跳转也很简单，但是本人比较懒，所有没写，对此不满的，我也很抱歉。

效果：

要实现分页效果其实比较简单，首先是从后台获取分页的总页码数，本文就不叙述这部分的内容，在这直接写总页码为15的分页，其中 HTML的代码如下：

<div class="pageNav">
    <ul class="pagination" >
        <li style='display: none'><a>上一页</a></li>
        <li style='display: none'><a>首页</a></li>
        <li style='display: none'><a>...</a></li>
        <li class='active'><a>1</a></li>
        <li class=""><a>2</a></li>
        <li class=""><a>3</a></li>
        <li class=""><a>4</a></li>
        <li class=""><a>5</a></li>
        <li class=""><a>6</a></li>
        <li class=""><a>7</a></li>
        <li class=""><a>8</a></li>
        <li class=""><a>9</a></li>
        <li class=""><a>10</a></li>
        <li class=""><a>11</a></li>
        <li class=""><a>12</a></li>
        <li class=""><a>13</a></li>
        <li class=""><a>14</a></li>
        <li class=""><a>15</a></li>
        <li style='display: none'><a>...</a></li>
        <li style='display: none'><a>尾页</a></li>
        <li style='display: none'><a>下一页</a></li>
    </ul>
</div>

下面是jQuery下写的js代码，其中fenyexs()是对页码显示的设置，

    var zongys=15;                      //生成总页码数，从后台获取
    var danqianye=1;                    //当前所显示的页码，设为全局变量，
    $(document).ready(function (){
        fenyexs();
    });
    //总页码与当前页码对应的显示样式
    function fenyexs() {
        var $yman=$(".pagination");
        var a=0;
        $yman.find("li").show();
        var dqym=parseInt($yman.find(".active").text());
        danqianye=dqym;
        if(dqym==1||isNaN(dqym)){
            $yman.find("li").eq(0).hide();
        }
        if(dqym==zongys||isNaN(dqym)){
            $yman.find("li").eq(zongys+5).hide();
        }
        if(zongys<=5){
            $yman.find("li").eq(1).hide();
            $yman.find("li").eq(2).hide();
            $yman.find("li").eq(zongys+3).hide();
            $yman.find("li").eq(zongys+4).hide();
        }else {
            if(dqym>zongys-3){
                $yman.find("li").eq(zongys+3).hide();
                $yman.find("li").eq(zongys+4).hide();
                for(a=3;a<=zongys-3;a++){
                    $yman.find("li").eq(a).hide();
                }
            }else if(dqym<5){
                $yman.find("li").eq(1).hide();
                $yman.find("li").eq(2).hide();
                for(a=8;a<=zongys+2;a++){
                    $yman.find("li").eq(a).hide();
                }
            } else if(dqym>=5&&dqym<=zongys-3){
                for(a=3;a<dqym;a++){
                    $yman.find("li").eq(a).hide();
                }
                for(a=dqym+5;a<zongys+3;a++){
                    $yman.find("li").eq(a).hide();
                }
            }
        }

    }
    //点击改变当前页码值，并向后台发送
    $(document).on('click','.pagination li',function () {
        var $yman=$(".pagination");
        var ymm=$(this).text();
        if(ymm=='上一页'){
            $yman.find(".active").prev("li").addClass("active").siblings("li").removeClass("active");
        }else if(ymm=='下一页'){
            $yman.find(".active").next("li").addClass("active").siblings("li").removeClass("active");
        }else if(ymm=='首页'){
            $yman.find("li").eq(3).addClass("active").siblings("li").removeClass("active");
        }else if(ymm=='尾页'){
            $yman.find("li").eq(2+zongys).addClass("active").siblings("li").removeClass("active");
        }else if(ymm=='...'){

        }else {
            $(this).addClass("active").siblings("li").removeClass("active");
        }
        fenyexs();
        huoqufenyexinxi();//向后台获取分页信息
    });
    function huoqufenyexinxi() {
        alert(danqianye);
    }

其中页面样式如下：

 body {
            font-family:Microsoft YaHei
        }
        li {
            list-style:none
        }
        a {
            text-decoration:none
        }
        .pagination {
            position:relative
        }
        .pagination li {
            display:inline-block;
            margin:0 5px
        }
        .pagination li a {
            padding:0 10px;
            display:inline-block;
            border:1px solid #ddd;
            background:#fff;
            color:#666
        }
        .pagination li a:hover {
            background:#eee
        }
        .pagination li.active a {
            color:#666;
            border:none;
            font-weight:700
        }
        .pageNav {
            text-align:right
        }

猜你喜欢