分页

分页一直是java web开发经常提到的问题，如何开发出一个既美观又方便的分页是很多开发者不得不关心的工作。在前台访问后台取回数据的时候调用：DLR.showPagination方法

传回的json数据格式：[{"approveDate":"2013-04-17"},[1,2,3,0,1,2,3],[58]]

{"approveDate":"2013-04-17"}是需要显示的数据，[1,2,3,0,1,2,3]则是分页信息，],[58]则是记录的总数，其中如果数据较多时还会出现中间省略号。

以下则是记录较多的分页显示情况

以下就是在项目中开发分页的核心代码。

 

//执行分页动作
DLR.doPagination = function (action, jsonStr) {

	var currentAction = DLR.generateAction(action);
	var form = dijit.byId("reportForm");
	var jsonValues = dojo.toJson(form.getValues(), true);
	if (action != "") {
		//showProgressMask('contentDiv');
        //dojo.byId("myForm").reset();
		var requestJson = {
			url : currentAction,
			postData:jsonValues,
			handleAs : "json",
			headers: {"Content-Type": "application/json"},    
			preventCache : false,
			load : function(data) {
				dojo.byId("currentAction").value = action;
				var pageData = data[data.length - 2];
		         data.splice(data.length - 2,1);
			    var totalPage = data.splice(data.length - 1,1);
			    DLR.showPagination(pageData,totalPage);
				var store = new dojo.data.ItemFileReadStore( {
						data : {
							items : data
						}
					});
					dijit.byId("reportGrid").setStore(store);
				};
		 
				//hideProgressMask('contentDiv');
			}
		};

		ECIS.xhrPost(requestJson);
	}
};
DLR.generateAction = function(preAction) {
	var pageData = dojo.byId("currentPageNo").value;
	var pageSize = dojo.byId("currentPerPageSize").value;
	var currentAction = "";
	   if (preAction.indexOf("?") != -1) {
		   currentAction = preAction + "¤tPageNo=" + pageData + "¤tPerPageSize=" + pageSize;
	   } else {
		   currentAction = preAction + "?currentPageNo=" + pageData + "¤tPerPageSize=" + pageSize;
	   }
	   return currentAction;
};

DLR.showPagination = function(pageData,totalPageSize){
	var pageLength = pageData.length;
	var perPageSize = 25 ;
	if(dojo.byId("currentPerPageSize").value != null){
		perPageSize = dojo.byId("currentPerPageSize").value;
	}
	var currentPageFirst = 1 + (pageData[pageLength-3] -1) * perPageSize;
	var currentPageEnd = (pageData[pageLength-2]- 1)* perPageSize;
	//当最后一页显示的数据不满足20/50/100时，显示 剩余条数
	if( pageData[pageLength-2] >= 2 ){
		var remainDataSize =  totalPageSize - (pageData[pageLength-3]- 1)* perPageSize;
		if(perPageSize >= remainDataSize){
			currentPageEnd = totalPageSize;
		}
	}else{
		//只有一页
		currentPageEnd = totalPageSize;
	}
    var strHtml = "<div class='page'>";
    	strHtml+= "	<div class=\"field\">";
    	strHtml+= "		<div style=\"display: inline-block\">";
    	strHtml+= "			<span>共</span>";
    	strHtml+= "			<span>" + totalPageSize + "</span>";
    	strHtml+= "			<span>条记录</span>";
    	strHtml+= "		</div>";
    	strHtml+= "		<div style=\"display: inline-block\">";
    	strHtml+= "			<span>当前</span>";
    	strHtml+= "			<span>" + currentPageFirst +"-" + currentPageEnd + "</span>";
    	strHtml+= "			<span>条</span>";
    	strHtml+= "		</div>";
    	strHtml+= "	</div>";
    	strHtml+= "	<div class=\"field\">";
    	strHtml+= "		<span>每页显示</span>";
    	strHtml+= "		<select width='8' id='perPageSize' name='perPageSize' dojoType='dijit.form.Select' required='false' onchange='doPageSizeChange()'>";
    	strHtml+= "			<option value='25'>25</option>";
    	strHtml+= "			<option value='50'>50</option>";
     	strHtml+= "			<option value='100'>100</option>";
    	strHtml+= "		</select>";
    	strHtml+= "	</div>";
    	strHtml+= "	<div class=\"field\">";
    
    if(pageData[pageLength-3] == 1){
 	   strHtml += "<span class='page_prev'></span>";
    }else{
 	   strHtml += "<a href='javascript:void(0);' onclick='DLR.submitPage("+pageData[pageLength-4]+")' class='page_prev'></a>";
    }
    strHtml += "<div style=\"display: inline-block\">";
    strHtml += "	<div style=\"vertical-align: middle; display: inline-block;\">";
    for (var i = 0; i < pageLength - 4; i++){
    	strHtml += "<span class=";
    	if(pageData[pageLength-3] == pageData[i]){
    		strHtml += "\"ecmIconCurPage\"";
    	}else{
    		strHtml += "\"ecmIconPage\"";
    	}
    	if (pageData[i] > 9){
    		strHtml += " style=\"background-position: 3px 0pt;\"";
    	}
    	strHtml += " onclick=\"DLR.submitPage(" + pageData[i] + ")\">" + pageData[i] + "</span>";
    }
	if(pageData[pageLength-3] == pageData[pageLength-1]){
		strHtml += "<span class='page_next'></span>";
	}else{
		strHtml += "<a href='javascript:void(0);' onclick='DLR.submitPage("+pageData[pageLength-2]+")' class='page_next'></a>";
	}
    strHtml += "	</div>";
    strHtml += "</div>";

    if(typeof(pageData.length) == 'undefined' || pageData[pageLength-1] == 0){
 	    	 strHtml = "";
    }
    dojo.byId("pagination").innerHTML =  strHtml;
    //设置分页显示条数
    if(strHtml != ""){
	    if(dojo.byId("currentPerPageSize").value != 25){
			dojo.byId("perPageSize").value = dojo.byId("currentPerPageSize").value;
		}
    }
   
};

// 分页功能点击数字时的响应函数，主要是获得action链接并把分页数值传回后台
DLR.submitPage = function(pageData){
	   dojo.byId("currentPageNo").value= pageData;
	   var pageForm = dijit.byId("pageForm");
	   var action = dojo.byId("currentAction").value;
	   
	   DLR.doPagination(action, dojo.toJson(pageForm.attr("value")));
};
function  doPageSizeChange() {
	dojo.byId("currentPerPageSize").value = dojo.byId("perPageSize").value;
	var action = dojo.byId("currentAction").value;
	DLR.doPagination(action );
}

 

<div id="bpmPagination" class="pdmPagination">
			<div align="right" style="float: right; margin:6px 5px 0px 0px;">
				<form dojoType="dijit.form.Form" id="pageForm" onsubmit="return false">
					<input dojoType="dijit.form.TextBox" id="currentAction" name="currentAction" type="hidden" value="" /> 
					<input dojoType="dijit.form.TextBox" id="currentPageNo" name="currentPageNo" type="hidden" value="" />
					<input dojoType="dijit.form.TextBox" id="currentPerPageSize" name="currentPerPageSize" type="hidden" value="25" />
					<div id="pagination" class="page"></div>
				</form>
	  	   </div>
		 </div>

 

CSS样式：

.pdmPagination {
    overflow: hidden;
    background-image: url("../images/bottomBar_bg.gif");
    background-repeat: repeat-x;
    border: 1px none;
    height: 32px;
    width: 100%;
    text-align: right;
    position:absolute; 
    left:0px;
    right:1px; 
    bottom:0px;
}
.page_prev{
	background-image: url("../images/toPrevious.png");
    background-repeat: no-repeat;
    height: 16px;
    text-align: center;
    width: 16px;
    vertical-align: middle; 
    display: inline-block;
}
.page_next{
    background-image: url("../images/toNext.png");
    background-repeat: no-repeat;
    height: 16px;
    text-align: center;
    width: 16px;
	vertical-align: middle; 
    display: inline-block;
}