js分页 - 简书

js分页

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="pg">Hello World!</div>
</body>
</html>
<script>
//url连接，countdatas表数据总行数，currentpage第几页（0是第一页），everpage每页多少行,beforlaterln前后长度
function pagestr(url,countdatas,currentpage,everpage,beforlaterln){
    var page= "";
    var intpart = Math.floor(countdatas/everpage);//整数
    var remainderpart = countdatas%everpage;//余数
    var countpage = intpart;//取整数
    var currentpage = currentpage<0 ? 0:currentpage;
    if(remainderpart==0){//余数判断
            currentpage=currentpage>countpage-1?countpage-1:currentpage;
            var pp=currentpage+1;
            var strbe="";
            var pagebefore=pp-beforlaterln-1;
            for(var i=pp; i > pagebefore; i--){
                if(i>0 && i<pp){
                    strbe="<a class='num' href='"+url+"&p="+(i-1)+"'>"+i+"</a>"+strbe;
                }
            }
           if(pp<=1){strbe="";}else{strbe="<a class='num' href='"+url+"&p=0'>首页</a>"+"<a class='num' href='"+url+"&p="+(pp-2)+"'>上一页</a>"+strbe;}
            var strmid="<span class='current'>"+pp+"</span>";
            var strlater="";
            var pagelater=pp+beforlaterln;
            for(var i=pp; i < pagelater; i++){
                if(i<countpage){
                    strlater+="<a class='num' href='"+url+"&p="+(i)+"'>"+(i+1)+"</a>";
                }
            }
            if(pp>=countpage){}else{strlater+="<a class='num' href='"+url+"&p="+pp+"'>下一页</a>"+"<a class='num' href='"+url+"&p="+(countpage-1)+"'>尾页</a>";}
            page=strbe+strmid+strlater;
        /**/
     }else {
            countpage+=1;//总页数
            currentpage=currentpage>countpage-1?countpage-1:currentpage;
            var pp=currentpage+1;
            var strbe="";
            var pagebefore=pp-beforlaterln-1;
            for(var i=pp; i > pagebefore; i--){ 
                if(i>0 && i<pp){
                    strbe="<a class='num' href='"+url+"&p="+(i-1)+"'>"+i+"</a>"+strbe;
                }
            }
            if(pp<=1){strbe="";}else{strbe="<a class='num' href='"+url+"&p=0'>首页</a>"+"<a class='num' href='"+url+"&p="+(pp-2)+"'>上一页</a>"+strbe;}
            var strmid="<span class='current'>"+pp+"</span>";
            var strlater="";
            var pagelater=pp+beforlaterln;
            for(var i=pp; i < pagelater; i++){
                if(i<countpage){
                    strlater+="<a class='num' href='"+url+"&p="+(i)+"'>"+(i+1)+"</a>";
                }
            }
            if(pp>=countpage){}else{strlater+="<a class='num' href='"+url+"&p="+pp+"'>下一页</a>"+"<a class='num' href='"+url+"&p="+(countpage-1)+"'>尾页</a>";}
            page=strbe+strmid+strlater;
        }
    
    return "共"+countpage+"页"+page;
}
var page=pagestr("http://www.abc.com?",195,11,10,8);    
document.getElementById("pg").innerHTML=page;   
</script>

运行后得到一下字符串

共20页<a class='num' href='http://www.abc.com?&p=0'>首页</a>
<a class='num' href='http://www.abc.com?&p=10'>上一页</a>
<a class='num' href='http://www.abc.com?&p=3'>4</a>
<a class='num' href='http://www.abc.com?&p=4'>5</a>
<a class='num' href='http://www.abc.com?&p=5'>6</a>
<a class='num' href='http://www.abc.com?&p=6'>7</a>
<a class='num' href='http://www.abc.com?&p=7'>8</a>
<a class='num' href='http://www.abc.com?&p=8'>9</a>
<a class='num' href='http://www.abc.com?&p=9'>10</a>
<a class='num' href='http://www.abc.com?&p=10'>11</a>
<span class='current'>12</span>
<a class='num' href='http://www.abc.com?&p=12'>13</a>
<a class='num' href='http://www.abc.com?&p=13'>14</a>
<a class='num' href='http://www.abc.com?&p=14'>15</a>
<a class='num' href='http://www.abc.com?&p=15'>16</a>
<a class='num' href='http://www.abc.com?&p=16'>17</a>
<a class='num' href='http://www.abc.com?&p=17'>18</a>
<a class='num' href='http://www.abc.com?&p=18'>19</a>
<a class='num' href='http://www.abc.com?&p=19'>20</a>
<a class='num' href='http://www.abc.com?&p=12'>下一页</a>
<a class='num' href='http://www.abc.com?&p=19'>尾页</a>

希望对大家有帮助，谢谢！

最后编辑于：2020.06.14 10:32:25