笔记--------手动分页
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核心代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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 ; } } |
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C23和C++26的#embed嵌入资源指南
· 「EF Core」框架是如何识别实体类的属性和主键的
· 独立开发,这条路可行吗?
· 我在厂里搞 wine 的日子
· 如何通过向量化技术比较两段文本是否相似?
· 推荐 5 款实用的 Docker 可视化管理工具,工作效率翻倍!
· 瞧瞧别人家的接口重试,那叫一个优雅!
· 他没买 iPad,而是花了半年时间,为所有“穷学生”写了个笔记神器
· 上周热点回顾(7.7-7.13)
· MySQL 13 为什么表数据删掉一半,表文件大小不变?