原创

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>

希望对大家有帮助,谢谢!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python分页

    用户1623964
  • JAVA分页

    用户1623964
  • C#分页

    用户1623964
  • 手写可配置的express nodejs的代理

    nodejs比较好的代理包有:node-http-proxy和http-proxy-middleware。这两个我都用过,它们的优点自不用说,只说说缺点:它们不...

    疯狂的技术宅
  • okhttp——RetryAndFollowUpInterceptor

    okhttp的网络请求采用interceptors链的模式。每一级interceptor只处理自己的工作,然后将剩余的工作,交给下一级interceptor。本...

    Oceanlong
  • lettuce 在spring-data-redis包装后关于pipeline的坑,你知道吗?

    在日常开发过程中,如果想要构建一个高并发高吞吐量的系统,redis基本是成了标配。回想下现在比较常用的客户端也就是jedis、redission、lettuce...

    开发架构二三事
  • vuex使用记录

    附上官方文档的链接,想更进一步了解vuex的朋友可以看看:https://vuex.vuejs.org/

    渔父歌
  • [数据结构]链式存储: 多项式求和

    看完题目和测试数据你或许会和我一样纳闷,题目要求的输出中 序列按指数降序排列,而测试数据中的示例输出却有升序的 有降序的 还有不是升序的也不是降序的。

    泰坦HW
  • 什么鬼,又不知道怎么命名class了

    相信写css的人都会遇到下面的问题: 糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点... 而改别人css代码的时候则会一直...

    IMWeb前端团队
  • 什么鬼,又不知道怎么命名class了

    第一,class跟id不一样,class本来就是设计用来可以重复利用的,而id才是设计唯一的(如果遵循BEM,class几乎也都是唯一的了)。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券