Cet article présente principalement la page frontale et le code back-end de Java pour réaliser la pagination en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer
L'exemple de cet article partage Java. avec tout le monde. Le code spécifique affiché dans la pagination est pour votre référence. Le contenu spécifique est le suivant
Regardons d'abord l'image, qui est à peu près l'image, qui donne également une idée (ps : le framework SSH est utilisé)
Front-endJSPPage
<%@ 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){
$('#requireContentp').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){
$('#requireContentp').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){
$('#requireContentp').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>
<!-- 内容-->
<p class="well">
<!-- 标题-->
<p class="box"><h3><span class="glyphicon glyphicon-list" ></span>需求列表</h3></p>
<!-- 筛选条件-->
<p class="box">
<p class="row">
<p 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"/>
</p>
</p>
</p>
<!-- 内容-->
<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">
<p class="data-down-box">
<p class="row">
<p class="col-xs-12">
<h4 class="ellipsis"><a href="${pageContext.request.contextPath}/bid/bidAction_queryById?id=${id}"
rel="external nofollow" onclick="reward()">${title}</a></h4>
</p>
</p>
<p class="row mrgTopSma">
<p 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>
</p>
</p>
<hr/>
</p>
</s:iterator>
<!-- 分页 -->
<p id="rePagerp" class="rePagerp 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>
</p>
</p>
<hr/>
</body>
</html>Copier après la connexion
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";
}Copier après la connexion
service
public long countAllRe() {
return requirementDao.countAllRe();
}
public List<T> queryByPage(String hql, int pageNo, int pageSize) {
return requirementDao.queryByPage(hql, pageNo, pageSize);
}Copier après la connexion
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();
}Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
