javaScript翻页功能

//分页函数
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中的#就不会追加到地址栏后边了
        }
    }
}
//分页函数 end

var 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;
    }
});

猜你喜欢

转载自blog.csdn.net/supercaojh/article/details/78361000