javaScript翻页功能

来源：互联网发布：知乎查过敏源编辑：程序博客网时间：2024/06/06 13:12
//分页函数function page(opt){    if(!opt.id){        return false;    }    var pageContainer=document.getElementById(opt.id); //分页最外部的容器    var nowPage=opt.nowPage || 1; //当前处于第几页    var pageSize=opt.pageSize || 15; //每页的基数    var countPage=Math.ceil(opt.countItem/pageSize); //计算总共有多少分页    var callback=opt.callback || function(){}; //回调    var pageHtml='<span class="page-item-count">共'+countPage+'页</span>';    //控制器函数，生成一些特定的公共部分    var controllerTab={        prev:function(){            if(nowPage==1){                pageHtml+='<a href="#'+(nowPage-1)+'" class="prev off">上一页</a>';            }else{                pageHtml+='<a href="#'+(nowPage-1)+'" class="prev">上一页</a>';            }        },        addCurrent:function(){            if(nowPage==i){                pageHtml+='<a href="#'+i+'" class="current">'+i+'</a>';            }else{                pageHtml+='<a href="#'+i+'">'+i+'</a>';            }        },        next:function(){            if(nowPage==countPage){                pageHtml+='<a href="#'+(nowPage+1)+'" class="next off">下一页</a>';            }else{                pageHtml+='<a href="#'+(nowPage+1)+'" class="next">下一页</a>';            }        },        createLast:function(){            pageHtml+='<span class="omit">...</span>';            pageHtml+='<a href="#'+(countPage-1)+'">'+(countPage-1)+'</a>';            pageHtml+='<a href="#'+countPage+'">'+countPage+'</a>';        }    }    if(countPage<=10){        controllerTab.prev();        for(var i=1; i<=countPage; i++){            for(var i=1; i<=countPage; i++){                controllerTab.addCurrent();            }        }        controllerTab.next();        pageContainer.innerHTML=pageHtml;    }else{        if(nowPage<=5){            controllerTab.prev();            for(var i=1; i<=nowPage+2; i++){                controllerTab.addCurrent();            }            controllerTab.createLast();            controllerTab.next();            pageContainer.innerHTML=pageHtml;        }else if(nowPage==6){            controllerTab.prev();            for(var i=1; i<=nowPage+2; i++){                if(i==3){                    continue;                }                controllerTab.addCurrent();            }            controllerTab.createLast();            controllerTab.next();            pageContainer.innerHTML=pageHtml;        }else if(nowPage<=countPage-5){            controllerTab.prev();            pageHtml+='<a href="#1">1</a>';            pageHtml+='<a href="#2">2</a>';            pageHtml+='<span class="omit">...</span>';            for(var i=nowPage-2; i<=nowPage+2; i++){                controllerTab.addCurrent();            }            controllerTab.createLast();            controllerTab.next();            pageContainer.innerHTML=pageHtml;        }else{            controllerTab.prev();            pageHtml+='<a href="#1">1</a>';            pageHtml+='<a href="#2">2</a>';            pageHtml+='<span class="omit">...</span>';            for(var i=nowPage-2; i<=countPage; i++){                controllerTab.addCurrent();            }            controllerTab.next();            pageContainer.innerHTML=pageHtml;        }    }           callback(nowPage,countPage);    var aA=pageContainer.querySelectorAll('a');    for(j=0; j<aA.length; j++){        aA[j].onclick=function(){            var nowNum=parseInt(this.getAttribute('href').substring(1));            if(nowNum && nowNum<countPage+1){                pageContainer.innerHTML='';                page({                    id:'page-container',                    nowPage:nowNum,                    countItem:opt.countItem,                    pageSize:pageSize,                    callback:callback                });            }            return false; //阻止默认事件，这样a标签href中的#就不会追加到地址栏后边了        }    }}//分页函数 endvar oConsole=document.getElementById('console-info'); //演示打印信息//调用分页函数，根据配置参数生成分页page({    id:'page-container',    nowPage:1, //默认当前页    countItem:392, //总共有多少项    pageSize:15, //每页的基数    callback:function(now,count){        //实际开发中，在这里可以用ajax更新分页数据...        oConsole.innerHTML='当前页：'+now+' &nbsp;&nbsp;总共页：'+count;    }});
阅读全文
0 0