jquery 实现分页

 下面使用了JQuery的1.6.1的包

直接代码不解释

 

分页代码（JS生成）：

/**
 * <pre>
 * 显示
 * </pre>
 * @param totalCount 记录总数
 * @param pageCur 当前页数
 * @param pageCount 每页显示记录数
 */
function __showPageHtml(totalCount, pageCur, pageCount) {
	totalCount = totalCount * 1;
	pageCur = pageCur * 1;
	pageCount = pageCount * 1;
	pageNum = Math.floor((totalCount - 1) / pageCount) + 1;
	var pStr = " \u5171["+totalCount+"]\u6761\u8bb0\u5f55,\u5171["+pageNum+"]\u9875     ";
	var nStr = "";
	var dStr = "";
	
	pStr += "<a href='javascript:void(0);' οnclick='__selectPage(1)' class=\"blue\">\u9996\u9875</a>   ";
	if (pageCur == 1) {
		pStr += '<a href="javascript:void(0);" class="blue"><span>\u4e0a\u4e00\u9875</span></a>   ';
	} else {
		pStr += '<a href="javascript:void(0);" οnclick="__selectPage('
				+ (pageCur - 1)
				+ ');" class="blue"><span>\u4e0a\u4e00\u9875</span></a>   ';
	}
	if (pageCur == pageNum) {
		nStr = '<a href="javascript:void(0);" class="blue"><span>\u4e0b\u4e00\u9875</span></a>   ';
	} else {
		nStr = '<a href="javascript:void(0);" οnclick="__selectPage(' + (pageCur + 1)
				+ ');" class="blue"><span>\u4e0b\u4e00\u9875</span></a>   ';
	}
	nStr += "<a href='javascript:void(0);' οnclick='__selectPage(\""+pageNum+"\")' class=\"blue\">\u672b\u9875</a>";
	if (pageNum > 5) {
		if ((pageCur + 2) <= 5) {
			for (i = 1; i <= 5; i++) {
				dStr += '<a href="javascript:void(0);" οnclick="__selectPage(' + i
						+ ');" >' + i + '</a>   ';
			}
		} else if ((pageCur + 2) > 5 && (pageCur + 2) < pageNum) {
			for (i = pageCur - 2; i <= pageCur + 2; i++) {
				dStr += '<a href="javascript:void(0);" οnclick="__selectPage(' + i
						+ ');" >' + i + '</a>   ';
			}
		} else {
			for (i = pageNum - 4; i <= pageNum; i++) {
				dStr += '<a href="javascript:void(0);" οnclick="__selectPage(' + i
						+ ');" >' + i + '</a>   ';
			}
		}
	} else {
		for (i = 1; i <= pageNum; i++) {
			dStr += '<a href="javascript:void(0);" οnclick="__selectPage(' + i + ');">'
					+ i + '</a>   ';
		}
	}
	var html = pStr + dStr + nStr;
	$(".answerQuestion_footer").html(html);	
}

 

其中$(".answerQuestion_footer")的HTML代码如下：

<div id="nodata" style='text-align:center;font-weight:bold;'></div>
 <div style="height: 30px;"><div class="answerQuestion_footer" style="text-align:center;margin-top:15px"></div>

 

以上的pStr,nStr,dStr,就是生成HTML的页面代码。

每个<a></a>里面的onclick里面将调用__selectPage(curPage)函数。

该函数如下：

/**
     * 加载
     * @param pageNum
     */
    function __selectPage(pageNum){
    	loadLoginInfo(pageNum);
    }

其中loadLoginInfo(pageNum);是根据当前页查询数据

 

函数如下：

function loadLoginInfo(curPage){
	var url = "/workattend/loginInfoList.do?";
    	var dataUrl = "formMap.TERMCOURSE_ID="+termcourseId+"&formMap.CLASS_ID="+classId+"&formMap.IS_ONLINE="+isOnline;
    	dataUrl += "&formMap.REALNAME="+__realname;
    	dataUrl += "&formMap.CURRENT="+curPage+"&formMap.RANDOM="+Math.floor(Math.random() * 1000);
    	url += dataUrl;
    	$.post(
    		   url,
    		   function(data){
    			   var dataArray = data.split("&");

    			   data = dataArray[0];
    			   data = eval(data);
    			   
    			   if(data.length <= 0){//没数据时显示
    				   $("#stuLoginInfoTable").attr("style","display:none");
    				   $("#nodata").html("<p class=\"h4\" style=\"text-align:center;font-weight:bold; \">抱歉，暂没数据！</p>");
    				   $(".answerQuestion_footer").html("");
    			   }else{
    				   $("#stuLoginInfoTable").attr("style","display:");
    				   $("#nodata").html("");
    				   var html = "";
        			   for(var i=0;i<data.length;i++){
        				   html += " <tr>";
        				   html += " 	<td>"+data[i].map.REALNAME+"</td>";
        				   //小时转换
        				   var lastTimes = Math.round(data[i].map.LASTWEEKTIME);
           				   var totalTimes = Math.round(data[i].map.ONLINETIME);
        				   html += " 	<td class='align_center'>"+lastTimes+"小时</td>";//上周
        				   html += " 	<td class='align_center'>"+totalTimes+"小时</td>";//总
        				   //算天数
        				   var lastDt = data[i].map.LASTDT2;
        				   var onLine = "";
        				   if(lastDt != null && lastDt != ''){
        					   var date = new Date(lastDt.split("-")[0],lastDt.split("-")[1]-1,lastDt.split("-")[2]);
            				   var newDate = new Date();
            				   var day = parseInt(Math.abs(newDate - date) / 1000 / 60 / 60 /24);
            				   onLine = (data[i].map.ON_LINE=="1")?"在线":(""+day+"天前（"+data[i].map.LASTDT1+"）");
        				   }else{
        					   onLine = "";
        				   }
        				   html += " 	<td>"+onLine+"</td>";//最近登录
        				   html += " </tr>";
        			   }
        			   $("#stuLoginInfos").html(html);
        			   __showPageHtml(dataArray[1].split(",")[0],dataArray[1].split(",")[1],dataArray[1].split(",")[2]);//分页
    			   }
    		   }
    		);
	}

 

大家看到这个了吧：

__showPageHtml(dataArray[1].split(",")[0],dataArray[1].split(",")[1],dataArray[1].split(",")[2]);//分页

加载完数据时，将调用分页代码。

 

然后呢是JAVA代码：

public String loginInfoList()throws Exception{
		PG.setPageCount(5);
		PG.setCurrent(Long.parseLong(ObjectUtils.toString(formMap.get("CURRENT"))));
		
		List lists = workAttendService.loginInfoList(formMap,PG);
		String jsonStr = JSONUtil.serialize(lists);
		
		String pageStr = "&"+PG.getCount()+","+PG.getCurrent()+","+PG.getPageCount();
		getResponse().setCharacterEncoding("utf-8");
		getResponse().getWriter().write(jsonStr+pageStr);
		return null;
	}

以上代码中的JSONUtil来自com.googlecode.jsonplugin.JSONUtil类。

PG就是分页类了。这个类可以自己封装，最主要是根据当前页来查询数据库数据。

 

生成效果：