今天就跟大家聊聊有关利用Java如何实现前台与后台页面分页,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
先上图吧,大致如图,也就提供个思路(ps:使用了SSH框架)
前台JSP页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>数据交易猫</title> <script type="text/javascript"> //1分页下,动态添加disable给分页按钮 /* $(function(){ var myPageId="#"+$("#hidCurrentPage").val(); var myPageAId="#"+$("#hidCurrentPage").val()+" a"; $(myPageAId).addClass('main-bgcolor'); $(myPageAId).attr('href','javascript:void(0)') $(myPageId).addClass('disabled'); $(myPageId).addClass('disabledControl'); }) */ // $(function(){ }) //根据页数查询数据列表 function queryRequirListByPage(i) { var pageNo=i; var sortValue=$('#hidSortValue').val(); $.ajax({ url:'${pageContext.request.contextPath}/bid/reAction_queryRequirListByPage.action', type:'POST', data:{ sortValue:sortValue, pageNo:pageNo }, success:function(datas){ $('#requireContentDiv').html(datas); }, error:function(){ alert("失败"); }, }); } //根据下拉查询数据列表 function selectPage(obj){ var pageNo=obj.options[obj.selectedIndex].value; var sortValue=$('#hidSortValue').val(); $.ajax({ url:'${pageContext.request.contextPath}/bid/reAction_queryRequirListByPage.action', type:'POST', data:{ sortValue:sortValue, pageNo:pageNo }, success:function(datas){ $('#requireContentDiv').html(datas); }, error:function(){ alert("失败"); }, }); } //根据下拉选择排序方式 function selectSort(obj){ var sortValue = obj.options[obj.selectedIndex].value; var pageNo =1; $.ajax({ url:'${pageContext.request.contextPath}/bid/reAction_queryRequirListByPage.action', type:'POST', data:{sortValue:sortValue, pageNo:pageNo }, success:function(datas){ $('#requireContentDiv').html(datas); }, error:function(){ alert("失败"); }, }); } $(document).ready(function(){ var backSortValue=$('#backSortValue').val(); console.log("backSortValue"+backSortValue) $("#category option").each(function(){ var thisId='#'+this.id; var thisValue=this.value; if(backSortValue==thisValue){ $(thisId).attr('selected','selected'); } }); }) </script> </head> <body> <!-- 内容--> <div class="well"> <!-- 标题--> <div class="box"><h4><span class="glyphicon glyphicon-list" ></span>需求列表</h4></div> <!-- 筛选条件--> <div class="box"> <div class="row"> <div class="col-xs-12"> <span>筛选:按</span> <select id="category" name="category" onchange="selectSort(this)"> <option id="categoryTime" value="publishDatetime">最新</option> <option id="categoryPrice" value="price">价格降序</option> <input id="backSortValue" type="hidden" value="${sortValue}"> </select> <hr class="mrgZero mrgTopSma"/> </div> </div> </div> <!-- 内容--> <input type="hidden" name="hidCurrentPage2" id="hidCurrentPage" value="${currentPage}"> <input type="hidden" id="hidAllPage" value="${allPage}"> <input type="hidden" id="hidSortValue" value="${sortValue}"> <s:iterator value="#requiList"> <div class="data-down-box"> <div class="row"> <div class="col-xs-12"> <h5 class="ellipsis"><a href="${pageContext.request.contextPath}/bid/bidAction_queryById?id=${id}" rel="external nofollow" onclick="reward()">${title}</a></h5> </div> </div> <div class="row mrgTopSma"> <div class="col-xs-12 "> <p class="data-provider padLeftBig sec-color ellipsis">悬赏积分:<span>${price}</span></p> <p class="data-intro padLeftBig ellipsis sec-color">需求描述:<span>${requirementDescription}</span></p> </div> </div> <hr/> </div> </s:iterator> <!-- 分页 --> <div id="rePagerDiv" class="rePagerDiv box"> <nav> <ul class="pager"> <!-- 判断当前页是否位1,如果不为1则显示上一页, --> <s:if test="1 == #currentPage"> </s:if> <s:else> <li> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Previous" onclick="queryRequirListByPage(${currentPage-1})"> <span aria-hidden="true">«</span> </a> </li> </s:else> <!-- 首页 --> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="queryRequirListByPage(1)">首页</a></li> <li> <span><span class="main-color">${currentPage}</span>/ ${allPage}页</span> </li> <!-- 尾页 --> <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="queryRequirListByPage(${allPage})">尾页</a></li> <!-- 判断当前页和总页数,小于则显示下一页, --> <s:if test="#currentPage < #allPage"> <li> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" aria-label="Next" onclick="queryRequirListByPage(${currentPage+1})"> <span aria-hidden="true">»</span> </a> </li> </s:if> <li> <span class="skipPageSpan">跳转到第 <select onchange="selectPage(this)"> <s:iterator var="lst" begin="1" end="#allPage" step="1"> <s:if test="%{#lst == #currentPage}"> <option selected="selected" value="<s:property/>" ><s:property/></option> </s:if> <s:else> <option value="<s:property/>" ><s:property/></option> </s:else> </s:iterator> </select> 页 </span> </li> </ul> </nav> </div> </div> <hr/> </body> </html>
action
//查询需求列表 public String queryRequirListByPage(){ int pageSize=5;//每页记录 String hql="select r from Requirement r where r.reStatus !=2 "; if(sortValue == null || sortValue.length() <= 0){ hql=hql+"order by r.publishDatetime desc"; ActionContext.getContext().put("sortValue", "publishDatetime"); //当前页码条件 session.put("sessionReqSortValue","publishDatetime"); }else{ hql=hql+"order by r."+sortValue+" desc"; ActionContext.getContext().put("sortValue", sortValue); //当前页码条件 session.put("sessionReqSortValue",sortValue); } long icount=requirementService.countAllRe();//总记录数 long allPage;//总页数 //判断是否能整除,能则直接,不能则+1; if((icount%pageSize)==0){ allPage=icount/pageSize; } else{ allPage=(icount/pageSize)+1; } System.out.println("总记录:"+icount+";总页数:"+allPage+";当前页码:"+pageNo); List<Requirement> requiList=requirementService.queryByPage(hql, pageNo, pageSize); ActionContext.getContext().put("requiList", requiList);//需求列表 ActionContext.getContext().put("icount", icount);//总记录数 ActionContext.getContext().put("allPage", allPage);//总页数 ActionContext.getContext().put("currentPage", pageNo); //当前页码 session.put("sessionCurrentPage", pageNo); return "requireContent"; }
service
public long countAllRe() { return requirementDao.countAllRe(); } public List<T> queryByPage(String hql, int pageNo, int pageSize) { return requirementDao.queryByPage(hql, pageNo, pageSize); }
dao
//这里可能会报错,就是直接查询数据列表(使用了SSH) public long countAll() { List<?> l = getSession().createQuery("select count(*) from " + clazz.getSimpleName()).list(); if (l != null && l.size() == 1 ) { return (Long)l.get(0); } return 0; } public List<T> queryByPage(String hql, int pageNo, int pageSize) { return getSession() .createQuery(hql) .setFirstResult((pageNo - 1) * pageSize) .setMaxResults(pageSize) .list(); }
看完上述内容,你们对利用Java如何实现前台与后台页面分页有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。