pc端分页

var Page = {};
(function(){
/*分页部分开始*/    
    var pageSize = 20,totalNo=0,count=0;
    //执行分页的方法
    function actPage(obj){
    //    totalNo = obj.totalNo;
        count = obj.count;
        //添加固定的html
        pageHtml();
        //添加分页html
        addPageHtml(totalNo,count);
        //
        $("#js_no li").live("click",function(event){            
            pageShow(event.currentTarget,obj.showList);
        });
        //上一页
        $("#js_preNo a").live("click",function(event){
            event.preventDefault();
            prePage(obj.showList);
        });
        //下一页
        $("#js_nextNo a").live("click",function(event){
            event.preventDefault();
            nextPage(totalNo,obj.showList);
        });
        //go
        $("#js_actGo").live("click",function(){
            goPage(totalNo,obj.showList);
        });
    }    
    
    //添加固定的html
    function pageHtml(){
        var length = $(".ajax_page").length;
        if(length == 0){
            var tpl = ["<div class='ajax_page'>",
                           "<div id='js_totalNo' class='totalNo'>总条数：<span></span></div>",
                               "<div id='js_preNo' class='preNo'><a href='javascript:,;'>上一页</a><span></span></div>",
                               "<div id='js_pageNo' class='pageNo'>",
                               "<ul id='js_no'></ul>",
                               "<ul id='js_goNo'>",                             
                                       "<li class='goNo'><input type='text' value='' /></li>",
                                       "<li id='js_actGo'>go</li>",
                                   "</ul>",            
                               "</div>",
                                  "<div id='js_nextNo' class='nextNo'><a href='javascript:,;'>下一页</a><span></span></div>",
                       "</div>"
                       ].join("");
                $("body").append(tpl);
        }        
    }
    
    //分页html
    function page(totalNo){
        var tplPage = "";
        for(var i=1;i<=totalNo;i++){//pageNo
            tplPage += [
                    "<li>"+ i + "</li>"
                   ].join("");
        }
        return tplPage;
    }
    
    //添加分页html
    function addPageHtml(totalNo,count){
        var tplPage = page(totalNo);
        
        $("#js_no").html(tplPage);
        $("#js_totalNo span").text(count)
        $("#js_no li").eq(0).addClass("pageSel");
        //初始化分页显示。。。。
        pageShowPoint();
    }    
    
    //点击具体的页码就行页面显示
    function pageShow(ele,func){
        var pageNo = $(ele).text();
        $(ele).addClass("pageSel").siblings().removeClass("pageSel");
        //点击具体页码，go,上一页，下一页的时候，显示points
        pageShowPoints(parseInt(pageNo));
        func(pageNo,pageSize);
    }
        
    //上一页
    function prePage(func){
        var pageNo = parseInt($(".pageSel").text()) - 1;
        if(pageNo == 0){
            return false;
        }
        $(".pageSel").removeClass("pageSel").prev().addClass("pageSel");
        pageShowPoints(parseInt(pageNo));
        func(pageNo,pageSize);
    }
        
    //下一页
    function nextPage(totalNo,func){        
        var pageNo = parseInt($(".pageSel").text()) + 1;
        if(pageNo == (totalNo+1)){
            return false;
        }
        $(".pageSel").removeClass("pageSel").next().addClass("pageSel");
        pageShowPoints(parseInt(pageNo));
        func(pageNo,pageSize);        
    }
        
    //go
    function goPage(totalNo,func){
        var pageNo = $("#js_goNo input").val();
        if(0 < pageNo && pageNo <= totalNo){
//            for(var i=0;i<$("#js_no li").length;i++){
//                var noText = $("#js_no li").eq(i).text();
//                if(noText == pageNo){
                    $("#js_no li").eq(pageNo-1).addClass("pageSel").siblings().removeClass("pageSel");
        //        }
            //}
            pageShowPoints(parseInt(pageNo));
            func(pageNo,pageSize);
        }else{
            return false;
        }        
    }    
    
    //初始化分页显示。。。。
    function pageShowPoint(){
        var number = $("#js_no li").length;
        if(number > 10){
            for(var i=0;i<number;i++){
                if(i>4 && i<(number-1)){
                    $("#js_no li").eq(i).hide();                    
                }
            }
            $("#js_no li").eq(number-1).before("<div class='hidePageNo' style='float:left;'>......</div>");
        }
    }
    
    //点击具体页码，go,上一页，下一页的时候，显示points
    function pageShowPoints(currPage){
        var isHidePageNo = $(".hidePageNo").length;
        if(isHidePageNo != 0){            
            var number = $("#js_no li").length;            
            if(currPage >4 && currPage< (number-3)){
                $(".hidePageNo").remove();
                for(var i=1;i<(currPage-3);i++){                    
                    $("#js_no li").eq(i).hide();
                }
                for(var j =(currPage + 2);j< (number-1);j++){
                        $("#js_no li").eq(j).hide();
                }
                for(var s =(currPage - 3);s< (currPage + 2);s++){
                    $("#js_no li").eq(s).show();
                }    
                $("#js_no li").eq(currPage-3).before("<div class='hidePageNo' style='float:left;'>...</div>");
                $("#js_no li").eq(currPage+2).after("<div class='hidePageNo' style='float:left;'>...</div>");
            }
            if(currPage <= 4){
                $(".hidePageNo").remove();
                for(var i=5;i<(number-1);i++){
                    $("#js_no li").eq(i).hide();                    
                }
                for(var j=0;j<=4;j++){
                    $("#js_no li").eq(j).show();                    
                }                
                $("#js_no li").eq(number-1).before("<div class='hidePageNo' style='float:left;'>......</div>");            
            }
            if(currPage >= (number-3)){
                $(".hidePageNo").remove();
                for(var i=1;i<(number-5);i++){
                    $("#js_no li").eq(i).hide();                    
                }
                for(var j=(number-5);j < number;j++){
                    $("#js_no li").eq(j).show();                    
                }                
                $("#js_no li").eq(0).after("<div class='hidePageNo' style='float:left;'>......</div>");            
            }
        }        
    }
    
    Page.actPage = actPage;
/*分页部分结束*/

附：

样式

a:link,a:visited,a:hover,a:active{
    text-decoration:none;
    color:#4F6B72;
}
.ajax_page{
    80%;
    margin:0 auto;
    overflow: hidden;
    margin-top: 20px;
}
.totalNo{
    float:left;
}
.pageNo{
    float:left;
}
.pageNo ul{
    float:left;
}
.pageNo ul li{
    float:left;
    list-style:none;
    padding:0px 6px;
    margin-right: 3px;
    cursor: pointer;
    border:1px solid #EFEFEF;
}
.pageNo ul li:hover{
    border:1px solid #003B54;
}
.preNo{
    float:left;
    text-align: center;
     20%;
}
.nextNo{
    float:left;
    text-align: center;
     20%;
}
.pageNo ul li.goNo{
    border:0;
}
.pageSel{
    background:#003B54;
    color:#fff;
    font-weight:bold;
}
.goNo input{
    height: 26px;
    line-height: 26px;
     40px;
}
.hidePage{
    float:left;
}

/*使用方法

Page.actPage({
  　　count:count,
 　　 totalNo:totalNo,
  　　showList:function(pageNo,pageSize){
  　　goldRoleList(pageNo,pageSize);//获取每条数据的函数
　　  }
 });

*/