1.页面 绑定page对象的 pageSize每页大小 和 pageCurren当前页数(隐藏域中保存这两个值),首次请求后台后,把值放上去。
2.首页,上一页,当前页,下一页,尾页。绑定事件,动态改变pageCurren的值,然后发送请求后台。
3. 每次后台查询出 总的行数totalRows,根据 pageSize计算出总页数totalPages (totalRows/pageSize),
oracle: 开始行数:startRow = (currentPage - 1) * pageSize; 结束行数:currentPage* pageSize
<div id="pageNumDiv" style="margin-top: 5px;"> <div style="float: left;"> <select id="pageSizeSelect" style="height: 20px"> <option value="20" selected="selected">20</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div style="float: left;"> <img id="topImg" alt="第一页" src="${pageContext.request.contextPath}/css/common/images/first.gif" style="padding-top: 4px;cursor:pointer;"> </div> <div style="float: left;"> <img id="prevImg" alt="上一页" src="${pageContext.request.contextPath}/css/common/images/prev.gif" style="padding-top: 4px;cursor:pointer;"> </div> <div style="float: left;"> 当前页<input type="text" id="txtCurrPage" value="1" style="height: 20px" size="4"/>总页数<span>1</span> </div> <div style="float: left;"> <img id="nextImg" alt="下一页" src="${pageContext.request.contextPath}/css/common/images/next.gif" style="padding-top: 4px;cursor:pointer;"> </div> <div style="float: left;"> <img id="lastImg" alt="最后一页" src="${pageContext.request.contextPath}/css/common/images/last.gif" style="padding-top: 4px;cursor:pointer;"> </div> </div>
$("#flightDetailListSearchBtn").click(function(){
$("#txtCurrPage").val("1");
searchInfo();
});
$("#pageNumDiv div:eq(1)").click(function(){//第一页
$("#txtCurrPage").val(1);
searchInfo();
});
$("#pageNumDiv div:eq(2)").click(function(){//上一页
var prePage = Number($("#txtCurrPage").val())-1;
if(!isNaN($("#txtCurrPage").val()) && prePage > 0 ){
$("#txtCurrPage").val( prePage );
searchInfo();
}
});
$("#pageNumDiv div:eq(4)").click(function(){//下一页
var nextPage = Number($("#txtCurrPage").val())+1;
if(!isNaN($("#txtCurrPage").val()) && nextPage <= totalPage){
$("#txtCurrPage").val(nextPage);
searchInfo();
}
});
$("#txtCurrPage").keydown(function(event){//回车键
if(event.keyCode=="13"){
if(!isNaN($(this).val())){
searchInfo();
}
}
});
$("#pageNumDiv div:eq(5)").click(function(){//最后一页
$("#txtCurrPage").val(totalPage);
searchInfo();
});
$("#pageNumDiv select").change(function(){
searchInfo();
});
function searchInfo(){ firstOpen++; //分页设置 $("#pageSize").val($("#pageSizeSelect").val()); $("#currentPage").val($("#txtCurrPage").val()); var data = $("#flightDetailListSearchForm").serialize(); $("#flightDetailListDiv").parent().find(".ui-button-text").eq(0).attr("params",data);//绑定参数 //生成遮盖 converflexigrid("#flightDetailListWithChooseDiv"); $.post($path+"/mc/foilManage/goodAnalysisshowList",data,function($data){ //返回数据之后隐藏遮盖 removeConverflexigrid("#flightDetailListWithChooseDiv"); var errorMessage = $data.errorMessage; if(errorMessage!=undefined ){ hiAlert(errorMessage,"提示"); }else { var vwStatisticalAnalysisList = $data.vwStatisticalAnalysisList; var html = ""; //$("#moreFoilDetail tr:gt(0)").remove(); $("#moreFoilDetailList tr").remove(); if (vwStatisticalAnalysisList != undefined && vwStatisticalAnalysisList.length > 0) { for (var i = 0; i < vwStatisticalAnalysisList.length; i++) { if (i % 2 == 0) { html = html + "<tr style=‘background-color: rgb(220, 220, 220);‘>"; } var moreFoil = vwStatisticalAnalysisList[i]; for (var j = 0; j < vwStatisticalAnalysisparamters.length; j++) { var showValue = ""; if(moreFoil[vwStatisticalAnalysisparamters[j]]!= undefined ){ showValue = moreFoil[vwStatisticalAnalysisparamters[j]]; } html = html + "<td><div class=‘dataManage_td_div3‘ style=‘width:100%;"+tableWidthCss[j]+"‘>" + showValue + "</div></td>"; } html = html + "</tr>"; } var pager = $data.pager; $("#pageNumDiv div span").html(pager.totalPages); totalPage = pager.totalPages; $("#totalRows").html("总数:"+pager.totalRows); } else { //html = html + "<tr><td colspan=‘" + vwStatisticalAnalysisColumns.length + "‘>暂无数据</td></tr>"; var pager = $data.pager; $("#pageNumDiv div span").html("1"); totalPage = pager.totalPages; $("#totalRows").html("无记录数"); $("#currentPage").val("1"); } $("#moreFoilDetailList").append(html); } },‘json‘);
后台page核心代码如下:
public void setTotalRows(int totalRows) {
this.totalRows = totalRows;
this.totalPages = totalRows / pageSize;
int mod = totalRows % pageSize;
if (mod > 0) {
this.totalPages++;
}
if (this.currentPage > totalPages){
if(isFor){
int forSize = currentPage%totalPages;
if(forSize>0){
currentPage=forSize;
}else{
currentPage = totalPages;
}
}else{
this.currentPage = totalPages;
}
}
this.startRow = (currentPage - 1) * pageSize;
if (this.startRow < 0) {
startRow = 0;
}
if (this.currentPage == 0 || this.currentPage < 0) {
currentPage = 1;
}
}
原文:http://www.cnblogs.com/GotoJava/p/6158477.html