• 老公教我写分页


    <!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>
  • 相关阅读:
    Cocoa如何应用设计模式
    ios 内存使用陷阱
    mac 下代码合并比较的工具(changes)
    ios NSString 字符串常用方法
    [转]PP团队圣经巨著《Application Architecture Guide2.0》12章>表现层
    ibatis hibernate 简单比较
    SharePoint安装
    ORM原理ORM目标及分层
    关于建筑与软件的思考
    [转]PP团队圣经巨著《Application Architecture Guide2.0》24章>Web程式开发向导
  • 原文地址:https://www.cnblogs.com/RonnieQin/p/8820726.html
Copyright © 2020-2023  润新知