javascript实现分页效果

一般的页面我们实现分页效果都是用跳转的形式,但是有些需求需要我们在不跳转页面的同时完成分页效果,简单的一个实现例子:

window.onload = function(){
          page({
              id:'pageBox',
              nowNum:7,
              allNum:10,
              callback:function(now,all){
                  alert(now+ ' '+all)

              }
          })
        }
        function page(obj){
            if(!obj.id){
                return false;
            }
            var obj1 = document.getElementById(obj.id);
                nowNum =obj.nowNum || 1,
                allNum = obj.allNum || 5,
                callback=obj.callback ||function(){};
            if(nowNum>=4&& allNum>=6){
                var oA = document.createElement('a');
                oA.href='#1';
                oA.innerHTML ='首页';
                obj1.appendChild(oA);
            }
            if(nowNum>=2){
                var oA = document.createElement('a');
                oA.href='#'+(nowNum-1);
                oA.innerHTML ='上一页';
                obj1.appendChild(oA);
            }
            if(allNum<=5){
                for(var i=1; i<allNum;i++){
                    var oA = document.createElement('a');
                    oA.href='#'+i;
                    if(nowNum==i){
                        oA.innerHTML=i;
                    }else {
                        oA.innerHTML ='[' +i+']';

                    }
                    obj1.appendChild(oA);
                }

            }else{
                for(var i =1;i<=5;i++){
                    var oA = document.createElement('a');
                   if(nowNum==1||nowNum==2){
                       oA.href='#'+i;
                       if(nowNum==i){
                           oA.innerHTML =i;
                       }else{
                           oA.innerHTML ='[' +i+']';
                       }

                   } else if((allNum-nowNum)==0 ||(allNum-nowNum)==1){
                       oA.href='#'+(allNum-5+i);
                       if((allNum-nowNum)==0 && i==5){
                           oA.innerHTML=(allNum-5+i);
                       }else if((allNum-nowNum)==1&&i==4){
                           oA.innerHTML=(allNum-5+i);
                       }
                       else{

                           oA.innerHTML='['+(allNum-5+i)+']';

                       }

                   }else{
                       oA.href='#'+(nowNum-3+i) ;
                       if(i==3){
                           oA.innerHTML =(nowNum-3+i);
                       } else{
                           oA.innerHTML ='[' +(nowNum-3+i)+']';
                       }
                   }


                    obj1.appendChild(oA);
                }
            }
            if(allNum-nowNum>=1){
                var oA = document.createElement('a');
                oA.href='#'+(nowNum+1);
                oA.innerHTML ='下一页';
                obj1.appendChild(oA);
            }
            if(allNum-nowNum>=3&&allNum>=6){
                var oA = document.createElement('a');
                oA.href='#'+allNum;
                oA.innerHTML ='最后一页';
                obj1.appendChild(oA);
            }
            callback(nowNum,allNum)
            var aA= obj1.getElementsByTagName('a');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    var nowNum= parseInt(this.getAttribute('href').substring(1));

                    obj1.innerHTML=''
                    page({
                        id:obj.id,
                        nowNum:nowNum,
                        allNum:allNum,
                        callback:callback
                    })
                     return false;
                }

            }

        }
        html代码:
        <div id="pageBox"></div>
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端岚枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值