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='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; } }