js分页

方法一

一： 先看效果图

二：主要功能：
上一页，下一页，跳转，尾页，

三： 代码

index.html:

    
    
    
    
    


    

        
首页
上一页

        
下一页
尾页
跳转
    
    
    

js:

var page = {
    init: function(){
        this.goPage(7,4,5,200)
    },
    /**
     * 
     * @param {当前页} cur 
     * @param {一页显示的数量} onepage 
     * @param {页码显示范围} range 
     * @param {数据总量} total 
     */
    goPage:function(cur,onepage,range,total){
        var dest= $('.pages');
        var _this=this;
        var totalPage = Math.ceil(total/onepage); //总页码数
         var tempStr='';
         var currentPage = cur;
         //根据页码范围控制页码显示
            tempStr = _this.createTemplete(totalPage,range,currentPage);

           dest.html();
           dest.html(tempStr);  
           $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
            //上一页事件 
            $('.prepage').on('click',function(){
                 if(currentPage>1){
                    currentPage-=1;
                tempStr = _this.createTemplete(totalPage,range,currentPage);
                dest.html();
                dest.html(tempStr); 
                $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
                 }
            });
            //下一页事件
            $('.nextpage').on('click',function(){
                currentPage+=1
                if(currentPage";
                
             }
            }else{
                    if(currentPage>=total-range){
                        var startPage = total-range;
                        for(var i=startPage; i<=total;i++){
                            tempStr+=""+i+"" 
                    }
                    }else{
                        var startPage=currentPage;
                        for(var i =startPage;i<=startPage+range;i++){
                        tempStr += ""+i+""
                    }
                    }
                } 
                return tempStr;
    },
}
$(function(){
    page.init();
})

总结：函数还可以进一步优化，所有的按钮都是事先写好的，还可以用一下方式来做分页。

方法二：

说明： 第二种参考了网上的代码 参考地址，增加了页码显示范围，该方法按钮是动态生成的。

    
    
    
    


        

          
user1
25
男
山西吕梁
          
user2
25
男
山西吕梁
          
user3
25
男
山西吕梁
          
user4
25
男
山西吕梁
          
user5
25
男
山西吕梁
          
user6
25
男
山西吕梁
          
user7
25
男
山西吕梁
          
user8
25
男
山西吕梁
          
user9
25
男
山西吕梁
          
user10
25
男
山西吕梁
          
user11
25
男
山西吕梁
          
user12
25
男
山西吕梁
          
user13
25
男
山西吕梁
          
user14
25
男
山西吕梁
          
user15
25
男
山西吕梁
          
user16
25
男
山西吕梁
          
user17
25
男
山西吕梁
          
user18
25
男
山西吕梁
          
user19
25
男
山西吕梁
          
user20
25
男
山西吕梁
          
user21
25
男
山西吕梁
          
user22
25
男
山西吕梁
          
user23
25
男
山西吕梁
          
user24
25
男
山西吕梁
          
user25
25
男
山西吕梁
          
user26
25
男
山西吕梁
          
user27
25
男
山西吕梁
          
user28
25
男
山西吕梁
          
user29
25
男
山西吕梁
          
user30
25
男
山西吕梁