Bootstrap 自定义分页方法

淡淡的烟草味﹌ 2022-08-13 11:57 246阅读 0赞

1.引入核心js类库

首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及bootstrap的js文件

2.视图设置:

<div class="col-sm-6">       
    <div class="dataTables_info" id="sample-table-2_info"></div>
    </div>
    
    <div class="col-sm-6">
    <div class="dataTables_paginate paging_bootstrap" id="pager">
    													
    </div>
    </div>

2.分页js:

/**
     * 分页信息
     * @param datas 数据
     */
    function createPagerInfo(datas){
    	 /**
    	  * 绑定当前显示数据
    	  */
    	if(datas.pageCount!=0){
    	$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageIndex+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");
    	}else{
    	$("#sample-table-2_info").html("<font style='font-weight:bold;'>当前第["+datas.pageCount+"/"+datas.pageCount+"]页 "+"共["+datas.total+"]条数据</font>");
    
    	if(datas.pageCount!=0){
    		//动态生成分页条
    		$("#pager").html('<ul class="pagination">'+
      				'<li class="next" id="start"><a href="#"  οnclick="pageStart('+datas.pageIndex+')">首页</a></li>'+
      				'<li class="next" id="up"><a  href="javascript:void(0)" οnclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+
      				'<li class="next" id="down"><a  href="javascript:void(0)" οnclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+
      				'<li class="next" id="last"><a href="#"  οnclick="pageLast('+datas.pageIndex+','+datas.pageCount+')">最后一页</a></li>'+
    				'</ul>');
    		}else{
    			$("#pager").html('<ul class="pagination">'+
    	  				'<li class="next" id="start"><a href="#"  οnclick="pageStart('+datas.pageIndex+')">首页</a></li>'+
    	  				'<li class="next" id="up"><a  href="javascript:void(0)" οnclick="pageUp('+datas.pageIndex+')">上一页</a></li>'+
    	  				'<li class="next" id="down"><a  href="javascript:void(0)" οnclick="pageDown('+datas.pageIndex+','+datas.pageCount+')" >下一页</a></li>'+
    	  				'<li class="next" id="last"><a href="#"  οnclick="pageLast('+datas.pageCount+','+datas.pageCount+')">最后一页</a></li>'+
    					'</ul>');	
    		}			
    }

4.点击页数事件

/**
     * 首页
     * @param pageStartIndex
     */
    function pageStart(pageStartIndex){
    	var nowPage = pageStartIndex-1;
    	var pageStart = 1;
    	if(nowPage==0){
    		$.msg("消息提示!","当前已经是首页数据","btn-primary");
    	}else{
    		gainDetailsInfo(pageStart);
    	}
    	
    }
    /**
     * 最后一页
     * @param pageIndex
     * @param pageTotal
     */
    function pageLast(pageIndex,pageTotal){
    	console.info(pageIndex);
    	console.info(pageTotal);
    	   var nowPage = pageTotal;
    	   if(pageIndex == pageTotal){
    		   $.msg("消息提示!","当前已经是最后一页数据","btn-primary");
    	   }else{
    		   gainDetailsInfo(nowPage);   
    	   }
    		  
    
           
    	 
    	  
    }
    /**
     * 上一页
     * @param c
     */
    function pageUp(c){
    	var nowPage = c-1;
    	if(nowPage==0||nowPage == -1){
    		 $.msg("消息提示!","当前已经是首页数据","btn-primary");
    	}else{
    		gainDetailsInfo(nowPage);
    	}
    		
    	
    }
    /**
     * 下一页
     * @param now
     * @param total
     */
    function pageDown(now,total){
    	var nowPage = now+1;
    	if(now==total||total==0){
    		$.msg("消息提示!","当前已经是最后一页数据","btn-primary");
    		$("#down").attr({"disabled":"disabled"});
    	}else{
    		gainDetailsInfo(nowPage);	
    	}
    	
    }