java前端 翻页 javaweb分页前端实现

这段时间因为项目需要，要做一个分页的功能，具体来说就是希望从数据库每次只取一部分结果，这样每页就显示那些结果，实现原理很简单，就是建立一个Pageutil类，里面放当前访问的页数（这个是从客户浏览器传到后台的数据，所以你的分页需要用它来定位记录的条目）和每一页显示的记录行数。然后通过分页计算就可以得出下列数据。

分页对象代码：

public class PageUtil {
private int pageNo;//页号
private int pageSize;//页面大小
private int totalSize;//数据总大小
private int totalPage;//总共多少页
private int sta;//附加条件


@Override
public String toString() {
return "PageUtil [pageNo=" + pageNo + ", pageSize=" + pageSize
+ ", totalSize=" + totalSize + ", totalPage=" + totalPage
+ ", sta=" + sta + "]";
}




public int getPageNo() {
return pageNo;
}


public int getSta() {
return sta;
}




public void setSta(int sta) {
this.sta = sta;
}
//对页号的处理
public void setPageNo(int pageNo) {
if(pageNo<=0){
this.pageNo=1;
}else if(this.totalPage!=0&&pageNo>this.totalPage){
this.pageNo=this.totalPage;
}else{
this.pageNo = pageNo;
}
}




public int getPageSize() {
return pageSize;
}
//对页面大小的处理
public void setPageSize(int pageSize) {
if(pageSize<=0){
this.pageSize=5;
}else{
this.pageSize = pageSize;
}
}




public int getTotalSize() {
return totalSize;
}
//对数据条数的处理
public void setTotalSize(int totalSize) {
if(totalSize<0){
this.totalSize=0;
}else{
this.totalSize = totalSize;
}
}
//对数总页面数量的处理
public int getTotalPage() {
totalPage=this.totalSize%this.pageSize==0?this.totalSize/this.pageSize:this.totalSize/this.pageSize+1;
return totalPage;
}




@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + pageNo;
result = prime * result + pageSize;
result = prime * result + totalPage;
result = prime * result + totalSize;
result = prime * result + sta;
return result;
}








@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
PageUtil other = (PageUtil) obj;
if (pageNo != other.pageNo)
return false;
if (pageSize != other.pageSize)
return false;
if (totalPage != other.totalPage)
return false;
if (totalSize != other.totalSize)
return false;
if (sta != other.sta)
return false;
return true;
}
 }分页方法的优化：
public String getOrderInfo(){ 
int usersId = orderInfoBean.getUsersId();
//如果前台提出的是按条件分页查询，则往附加属性注值
if(orderInfoBean.getOrdSta()!=0){
pageUtil.setSta(orderInfoBean.getOrdSta());
}
//判断是否是第一次调用这个方法
Object obj=session.get("pageUtil");
if(obj==null){
pageUtil=new PageUtil();
pageUtil.setPageNo(1);
pageUtil.setTotalSize(ordersService.getTotal(usersId));
pageUtil.setPageSize(5);
}
//对不同的操作请求进行判断
if("1".equals(op)){
pageUtil.setPageNo(1);
}else if("2".equals(op)){
pageUtil.setPageNo(pageUtil.getPageNo()-1);
}else if("3".equals(op)){
pageUtil.setPageNo(pageUtil.getPageNo()+1);
}else if("4".equals(op)){
pageUtil.setPageNo(pageUtil.getTotalPage());
}
//将最新的分页信息存起来
session.put("pageUtil", pageUtil);
//根据页面号查询信息
ordersList=ordersService.find(usersId,pageUtil.getSta(),pageUtil.getPageNo(),pageUtil.getPageSize());
//存到session中，方便前台的使用
session.put("yeorders", ordersList);
//转成json数据
jsonObject=new JsonObject<OrderInfoBean>();
//往前台传送
jsonObject.setRows(ordersList);
return "success";
 }html中的分页代码：
 <div class="comment_page" >  <!-- 订单的分页信息 --> 

<div class="page_info"> 

<ul> 

<li class="first"><a href="javascript:pageInfo(1)">首页</a></li> 

<li class="shang"><a href="javascript:pageInfo(2)">上一页</a></li> 

<li class="next"><a href="javascript:pageInfo(3)">下一页</a></li> 

<li class="last"><a href="javascript:pageInfo(4)">末页</a></li> 

</ul> 

</div> 

 </div>

js中的函数：

function pageInfo(op){
var usersId = $("#Id_hidden").val();
$.post("front/orderpage_getOrderInfo.action",{op:op,usersId:usersId},function(data){
var myorders=data.rows;
var str="";
for(var i=0;i<myorders.length;i++){
var ordStas=myorders[i].ordSta;
// 0 取消订单1 未支付2已支付等待发货 3待收货  4已签收
if(ordStas==0){
var zhuatai="订单取消";
}else if(ordStas==1){
var zhuatai="未支付";
}else if(ordStas==2){
var zhuatai="已支付等待发货";
}else if(ordStas==3){
var zhuatai="待收货";
}else if(ordStas==4){
var zhuatai="已签收";
}
str+="<div id='orderdiv'>";
str+="<div class='orderInfo'>";
str+="<p class='orderSta'>"+zhuatai+"（订单状态）</p>";
str+="<div><span class='date'>日期："+myorders[i].ordDate+"　</span><span>|</span>";
str+="<span class='shrName>"+myorders[i].recipient+"</span><span>|</span>";
str+="<span>订单号:</span><span class='orderId'>　"+myorders[i].ordId+"（订单号）　| </span>　";
str+="<span>订单金额：</span><span class='orderPay'>"+myorders[i].ordTatol+"</span><span>元</span>";
str+="</div></div>";
for(var j=0;j<myorders[i].orderdetails.length;j++){
str+="<div class='prodInfo'>";
str+="<div class='imgDiv'><img src=../uploadpic/"+myorders[i].orderdetails[j].goodsminPic+" class='prodPic'/></div>";
str+="<div class='prodList'><p><span class='prodName'>"+myorders[i].orderdetails[j].goodsName+"</span></p>";
str+="<p><span class='prodPrice'>"+myorders[i].orderdetails[j].detaPrice+"</span><span>元　×　</span><spanclass='prodCount'>"+myorders[i].orderdetails[j].detaNum+"件</span></p></div></div>";
}
str+="</div>";
}
$("#bigDiv").html($(str)); 
},"json");
 }资源配置文件mapper.xml：
resultMap ：一对多
<resultMap type="OrderInfoBean" id="OrderInfoBeanMap">
<id property="ordId" column="ordId"/>
<collection property="orderdetails" column="ordId" ofType="Orderdetail" select="getOrderdetailByordId"></collection>
 </resultMap>


 <select id="selectOrderData"  parameterType="map" resultMap="OrderInfoBeanMap"><!--分页查询-->
select * from  (select a.*,rownum rn from (select o.*,ad.recipient from orders o,address ad where ad.addrId=o.addrId 
<if test="usersId != null and usersId != '' and usersId !=0">
and o.usersId=#{usersId}
</if> 
<if test="ordSta != null and ordSta != '' and ordSta !=0">
and ordSta=#{ordSta}
</if>  
order by ordDate desc)a where #{pageNo} >=rownum)b where rn>#{pageSize}
 </select>


 <select id="getOrderdetailByordId" parameterType="int" resultType="Orderdetail">
select o.ordId,g.goodsminPic,g.goodsName,od.detaNum,od.detaPrice,od.detaSta,p.ptId from 
orders o,orderdetail od,goods g,product p where o.ordId = od.ordId and od.ptId = p.ptId
and p.goodsId = g.goodsId and o.ordId = #{ordId}
 </select>