原生js分页插件免费下载

用原生态的js,写一个漂亮的分页插件吧!本js分页代码可以实现上下页,点击选中的效果,如果你不喜欢这个样式,可以再度美化样式。

JS代码

<script> 
        var pagecontent=document.getElementById('pagecontent'); 
        var prev=document.getElementById('prev'); 
        var next=document.getElementById('next'); 
        var count=100;//总共有多少条数据 
        var shownum=10;//每页显示的数量 
        var pagenum=5;//显示的页码数量 
        var pageindex=1; 
        create(); 
        function create(){ 
            var pageCount=Math.ceil(count/shownum);//向上取整,总共显示多少页 
            var start=1; 
            var end=pageCount; 
            if(pageindex<pagenum/2){//如果点击前两个页码,那么显示的就是前两个 
                start=1; 
                end=pagenum>pageCount?pageCount:pagenum;//如果总数大于每页显示的数量,就显示每页显示的数量,如果总数小于每页显示的数量,那么就显示总数 
            } 
            if(pageindex>pagenum/2){//如果点击的是后面两个 
                start=pageindex-Math.floor(pagenum/2);//第一个显示的页码就是2 、 3 、 4 、 5 、 6//点击4,显示的第一个数就是4-2 
                end=pageindex+Math.floor(pagenum/2)//点击4,最后一个数显示的就应该是4+2 
            } 
            if(pageindex>pageCount-Math.floor(pagenum/2)){//当总共有10页的时候,点击9,仍然显示6 、7 、8 、9  、10 
                start = pageCount - pagenum + 1;//开始就是10-5+1=6 
                end=pageCount; 
            } 
            start = start > 1 ? start : 1; 
            end = end > pageCount ? pageCount : end; 
            pagecontent.innerHTML=""; 
            for(var  i=start;i<=end;i++){ 
                var li=document.createElement('li'); 
                li.innerHTML=i; 
                li.index=i; 
                if(i==pageindex){ 
                    li.className="selected"; 
                } 
                li.onclick=function(){ 
                    pageindex=this.index; 
                    create(); 
                } 
                pagecontent.appendChild(li); 
            } 
 
            prev.onclick=null; 
            next.onclick=null; 
            if (pageindex > 1) { 
                prev.onclick = prevfn; 
            } 
            if (pageindex < pageCount) { 
                next.onclick = nextfn; 
            } 
        } 
 
        var prevfn=prev.onclick = function () { 
            pageindex--; 
            create(); 
        } 
        var nextfn=next.onclick = function () { 
            pageindex++; 
            create(); 
        } 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录