自己写的一个jQuery分页，基本上达到了50%代码，50%注释了

自己写的一个jQuery分页，基本上达到了50%代码，50%注释了

CSS样式

.page-box{text-align: right;}
.page-box a{text-decoration: none;padding: 5px 10px;border:1px solid #ccc;display: inline-block;text-align: center;font-family: '微软雅黑';min-width:15px;font-size: 14px;color: #555;margin-left: -1px;background:#fff;}
.page-box a:hover{background: #008ed8;border:1px solid #008ed8;color: #fff;}
.page-box a:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px; }
.page-box a:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px;}
.page-box .action{background: #008ed8;color: #fff; border:1px solid #008ed8;margin-left: -1px; }

html结构

<div class="page-box"></div>

引入jquery，js代码

    var zongNum = 133;//总记录数
    var showPage = 5;//需要显示的页数
    var current = 1;//当前页
    var pageNum = Math.ceil(zongNum/showPage);//总记录数除于需要显示的页数，向上取整，得到总页数
    var start = '';//起始页
    var end = "";//结束页

    //获取url参数
    $.getUrlParam = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    if($.getUrlParam('page')!=null){
        current = parseInt($.getUrlParam('page'));//根据参数获取当前页字符串，转换为整型
    }

    //如果当前页减2<=0且当前页大于或等于5
    if(current-2<=0&&current>=5||current-2<=0){
        start = 1;//起始页
    
    //如果当前页==总页数，起始页等于当前页-2
    }else if(current==pageNum){
        start = current-2;
    
    //如果当前页+1=>总页数，起始页等于当前页-2
    }else if(current+1>=pageNum){
        start = current-2;
    }else{
        
        //起始页等于当前页-2
        start = current-2;
    }

    //得到结束页,如果当前页+2=大于或者等于总页数，总页数等于结束页，否则结束页等于5
    end = current+2>=pageNum?pageNum:(current+2>=5?current+2:5);

    //得到分页，如果当前页减1等于0，不显示上一页，否则拼接上一页
    pageA = current-1==0?'':'<a href="?page='+(current-1)+'" class="page-up">&lt;</a>';

    //循环输出页码
    for(var i=start;i<=end;i++){
        //判断是否等于当前页
        if(current==i){
            pageA = pageA+'<a href="?page='+i+'" class="action">'+i+'</a>';//更改当前页样式
        }else{
            pageA = pageA+'<a href="?page='+i+'">'+i+'</a>';
        }
    }

    //如果当前页+1小于或者等于总页数 则显示下一页
    if(current+1 <= pageNum){
        pageA =  pageA+'<a href="?page='+(current+1)+'" class="page-lower">></a>';//拼接下一页
    }
    $('.page-box').append(pageA);//添加到节点里面

上一篇：thinkphp 5用phpmailer发送邮件

下一篇：plupload多图上传插件上传到七牛云-TP5框架