前后台共用分页的的实现

 最近在忙着开发项目，还有给女朋友找工作，好久没更新博客了，嘿嘿~

 

 闲话不多说，进入正题吧。开发的这个项目，比较注重前台展示，所以前台的jquery用的比较多。因为接手这个项目的时候，已经有人做了一大半了，看别人很痛苦的，你们懂的。然后我还发现一件更坑爹的事，就是他的所有的分页都是前台分页的！数据量大的时候速度很慢，然后和接口组的同事探讨了下，原来也不是前面那个人的原因，原来是是涉及到的数据表比较多，接口组的同事嫌麻烦返回了所有的数据！what the fuck！我能说什么？只要找项目组长商量了（他都不知道做的是前台分页，我能说什么，哎），最后改了一部分（此处省略一万字。。。），还有一部分还是前台分页。好吧，你们赢了。作为一个菜鸟，也只有被宰割了。苦逼啊！

 

那么问题了，既有前台分页，又有后台分页，怎样才能让分页复用呢？这样既能保证样式统一，也不会出现代码的冗余

 

--------------思路--------------

1.首先不管是前台分页还是后台分页，共通点在于分页的思路是一样的，点击上一页或者下一页时要取到当前页的数据，也就是说我首先要知道的是数据总条数recordCount、每页限制显示的条数pageSize、当前页这三个关键参数pageIndex。

2.所以就有了这个pageBar.js用于实现分页功能，此js中控制翻页以及跳转页，此js接收recordCount，以及pageSize和pageIndex，当然如果想实现百度那种分页效果a便签点击跳转，控制总分页数maxShowPage

/**
 * Author : zhu.zhancai by 2014 
 * anjun 2015年2月25日 16:36:40修改
 */
$.fn.pageBar = function(options) {
    var configs = {
        PageIndex: 1,
        PageSize: 0,
        TotalPage: 0,
        RecordCount: 0,
        maxShowPage : 10,
        onPageClick : function(pageIndex) {  
			return false;
		}	
    }
    $.extend(configs, options);
    var tmp = "",
    i = 0,
    currentPage = parseInt(configs.PageIndex);
    totalpage = parseInt(configs.RecordCount / configs.PageSize);
    totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage;
    
	if (configs.PageIndex > 1) {
        tmp += "<a href='javascript:void(0)'>< 上一页</a>"
    } else {
        tmp += "<a class=\"no\" href='javascript:void(0)'>< 上一页</a>"
    }
        
        //用于控制是长分页还是短分页
	if(configs.queryJudge!=null&&configs.queryJudge==1){
		tmp += "<a href='javascript:void(0)'>"+currentPage+"</a>"
	}else{
	
	tmp += "<a href='javascript:void(0)'>1</a>"
    if(totalpage >=configs.maxShowPage){
    	/*如果当前页面 - 标签数大于1 表示需要在左侧插入省略号，
		如果当前页面+标签树小于页面总数 表示需要在右侧插入省略号*/
    	if(currentPage-2>1){
    		if(currentPage-3!=1){
    			tmp += "...."
	    	}
	    	tmp += "<a href='javascript:void(0)'>" + (currentPage-2)+ "</a>"
	    	tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>"
		}
    	if(currentPage==3){
    		tmp += "<a href='javascript:void(0)'>" + (currentPage-1)+ "</a>"
    	}
    	if(currentPage!=1 && currentPage!=totalpage){
    		if(currentPage-1<3){
    			tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>"
    		}
    		tmp += "<a href='javascript:void(0)'>" + currentPage+ "</a>"
		}
    	if(currentPage==totalpage-2){
    		tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>"
    	}
		if(currentPage+2<totalpage){
			tmp += "<a href='javascript:void(0)'>" + (currentPage+1)+ "</a>"
			tmp += "<a href='javascript:void(0)'>" + (currentPage+2)+ "</a>"
			if(totalpage-currentPage!=3){
				tmp += "...."
			}
		}
    	tmp += "<a href='javascript:void(0)'>" + totalpage + "</a>"
    }else if(totalpage<configs.maxShowPage){
    	for(i=2 ;i<=totalpage ;i++){
    		tmp += "<a href='javascript:void(0)'>" + i + "</a>"
    	}
    }
	}
	if (configs.PageIndex < totalpage) {
        tmp += "<a href='javascript:void(0)'>下一页 ></a>"
    } else {
        tmp += "<a class=\"no\" href='javascript:void(0)'>下一页 ></a>"
    }   
        
    var pager = this.html(tmp)
    var index = pager.children('input')[0];
    pager.children('a').click(function() {
        var cls = $(this).attr('class');
        
        if (this.innerHTML == '&lt; 上一页') {
            if (cls != 'no') {
                configs.onPageClick(currentPage - 1) ; 
            }
        } else if (this.innerHTML == '下一页 &gt;') {
            if (cls != 'no') {
                configs.onPageClick(currentPage+1)
            }
        }else { 
            if (cls != 'cur') {
                configs.onPageClick(parseInt(this.innerHTML) );
            }
        }
    }).each(function() {
        if (configs.PageIndex == parseInt(this.innerHTML)) {
            $(this).addClass('cur')
        }
    }) 
} 

 

 

3.前台伪分页的实现：第一次通过发送请求取到所有的数据（这时候可以得到recordCount，totalPage，和计算出可以分多少页，以及定义的pageSize）并且将第一页数据显示出来，将数据存储到全局变量中，第二次发送请求的时候其实是取出的剩余的数据

 

/*** 分页工具条*/
	var $page = function(pageIndex){
		var pageOptions = {
				PageIndex : pageIndex,  
				PageSize : pageSize,  
				RecordCount : recordCount,  
				TotalPage : totalPage, 
				maxShowPage :  10,
				onPageClick : function(pageIndex) {
					$paginationCache(pageIndex);  
					return false;
				}
		}
		$('.g-pagerwp .g-pager').css('visibility', 'visible').pageBar(pageOptions);
	}

 调用$paginationCache()方法,取出数据

 

 

/** * 改用缓存数据load分页*/
	var $paginationCache = function(pageIndex){
		Index=pageIndex; 
		var trArray = []  ; 
		var currentIndex = 0 ; 
		var length =  0  ; 
		
		currentIndex   =  parseInt((Index - 1 ) * pageSize) ; 
                /***是否为最后一页*/
		if(window.$variable.Cachetotalpage == Index){
			length =  recordCount ; 
		}else{
			length = parseInt(Index * pageSize) ;
		}
		$("#info tr:not(#titleTr)").remove();
		
               /** 此处获取数据显示**/
		for(var i= currentIndex;i<length ;i++){
			//代码
		}
		
		$("#info").append(trArray.join(''));
		$page(Index) ;
	}

 4.后台分页的实现，比前台分页少一个步骤，思路基本一样，通过点击a标签或者下页，调用方法发送请求取到数据，不同的前台分页是取出缓存的数据，后台分页需要再次发送请求得到指定数据。java代码只负责取出指定数据，所有的分页操作通过js控制

/*后台分页显示函数*/
	var $loadAdminPage = function(pageIndex){
		$cleanAll();
		url="请求路径"; 
		
		$.ajax({
			type : "post",
			url :   basePath + url  , 
			async : true ,
			dataType : "json", 
			data :  $variable.qryCondition + "&currentPage=" + pageIndex,  
			beforeSend : loading() ,
			success : function(data){
				if(data==null){
					$.DialogBySHF.Alert({ Width: 300, Height: 200, Title: "提示信息", Content: '此项目编码下没有订单' });
					return;
				}
				recordCount = data["flowCount"];
				var arrayObj = data["returnInfo"]["flowList"] ; 
				    
				var trArray = []  ; 
				var length = arrayObj.length ; 		
                                
                                for(var i=0;i<length;i++){

				   //取出数据,并且显示
				}
				$("#info").append(trArray.join(''));
		                pageFilterFunction();
				var pageOptions = {
						PageIndex : pageIndex,  
						PageSize : pageSize,  
						RecordCount : recordCount,  
						TotalPage : totalPage, 
						maxShowPage :  10,
						onPageClick : function(pageIndex) {
							$loadAdminPage(pageIndex);  
							return false;
						}
						
				}
				$('#pageDiv .g-pager').css('visibility', 'visible').pageBar(pageOptions);
			},complete : function(){
				$("#loading").hide();
			} 
		});
		}    
至此，前后台分页完成了，菜鸟的分页完成了。