秦小小樱

导航

老公教我写分页 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= device-width, initial-scale = 1.0, user-scalable = no">

    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript " src="js/jquery-1.11.3.min.js" ></script>

</head>
<body>


<P>click me</P>

<input class="indexBt" type="button" value="首页">
<input class="lastPage" type="button" value="上一页"  onclick="lastPage()">

<span class="moreP">...</span>
<ul class="pages">
    <li class="curr">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<span class="moreN">...</span>
<input class="nextPage" type="button" value="下一页" onclick="nextPage()">
<input class="finalPage" type="button" value="末页">



</body>
<script >
    var total = 38;
    var curr = 1;
    var range = 2;//正常情况下当前页两边的数据位数
    $(document).ready(function(){
        $("li").click(function(){
            var page = $(this).html();
            console.log("target_page:"+page);
        });
    })
    function lastPage() {
        if(curr  == 1){
            alert("第一页");
        }else{
            curr =  curr -1;
            $("li").removeClass(curr);
            loadPages();
        }

    }

    function nextPage(){
        if(parseInt(curr + 1) > total){
            console.log("last page");
        }else {
            $(".pages li").attr("class","");
            // 改变页码数字
            curr = parseInt(curr + 1);
            console.log("target_page:" + curr);
            // 修改当前所有页面数据
            loadPages();
            
        }
    }

    function loadPages(){
        var start = curr - range;
        var end  = curr + range;
        if(start <=0){
            start = 1 ;
            end = 5;
        }else{
            if(end > total){
                end = total;
                start = total - 4;
            }
        }
        var html = "";
        for(var i = start;i<=end;i++){
            var pageNum = parseInt(i);
            if(curr == pageNum){
                html = html + '<li class="curr">'+ pageNum +'</li>';
            }else{
                html = html + '<li>'+ pageNum +'</li>';
            }
        }
        $(".pages").html(html);
        // 修改当前页显示效果
        var currIndex = -1;
        $(".pages li").each(function(index,ele){
            if($(ele).text() == curr){
                currIndex = index;
            }
        });
        $(".pages li").eq(currIndex).attr("class","curr");

        if(curr ==1){

            $(".moreP").hide();
            $(".moreN").show();
        }else if(curr == total){
            $(".moreP").show();
            $(".moreN").hide();;
        }else{
            $(".moreP").show();
            $(".moreN").show();
        }
        console.log(currIndex);
    }

    $(".indexBt").click(function(){
        curr =1;
        loadPages();
    })

    $(".finalPage").click(function(){
        curr =total;
        loadPages();
    })
</script>
</html>

 

posted on 2018-04-13 15:37  RonnieQin  阅读(110)  评论(0)    收藏  举报