怎么实现分页的效果

发布网友 发布时间：2022-09-08 07:47

我来回答

共2个回答

热心网友 时间：2024-11-30 11:05

用js脚本实现即可，简单的一个实现例子：

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>

热心网友 时间：2024-11-30 11:05

http://www.cnblogs.com/xianrongbin/p/3480790.html
也许对你的问题有帮助。