下面使用了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就是分頁類了。這個類可以自己封裝,最主要是根據當前頁來查詢數據庫數據。
生成效果: