分页查询前端jsp页面+后台代码实现（纯手写，没有使用任何插件）

最新推荐文章于 2024-07-10 18:33:40 发布

武侠㿝卄清

最新推荐文章于 2024-07-10 18:33:40 发布

阅读量1.4k

点赞数 1

分类专栏： java web开发

本文链接：https://blog.csdn.net/qq_30347133/article/details/109508786

版权

web开发同时被 2 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

最原始的分页，此外还可以使用分页插件 bootStrap 的 pageNation插件。

前端 jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="keywords" content="散标，理财产品，投资产品，投资理财" />
    <meta http-equiv="description" content=""/>
    <script type="text/javascript" language="javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/trafficStatistics.js"></script>
    <script type="text/javascript" language="javascript" src="${pageContext.request.contextPath}/js/huaceng_new.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/share.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css"/>
    <style type="text/css">body{background:#f2f2f2;}</style>
    <title>散标,互联网金融产品列表-动力金融网,专业的互联网金融信息服务平台</title>
</head>

<body>
<div id="header">
	<jsp:include page="commons/header.jsp"/>
</div>

<!--产品列表start-->
<div id="loanList">
	<div class="mainBox pro-list-body clearfix" id="rollingLayer">
  	<div class="pro-list <c:if test="${productType eq 2}">disperse-pro</c:if>">
	  <c:forEach items="${loanInfoList}" var="loanInfo">
	   	<!--已满标时追加pro-full-->
		<div class="pro-box <c:if test="${loanInfo.leftProductMoney eq 0}">pro-full</c:if>">
		    <div class="pro-top">
		      <h3>${loanInfo.productName}</h3>
		      <p>动力金融网特选小额信贷消费产品</p>
		    </div>
		    <div class="pro-main" style="height:260px;">
		      <div class="pro-rate">
	        <div class="rate">${loanInfo.rate}<span>%</span></div>
		        <h3>历史年化收益率</h3>
		      </div>
		      <div class="pro-data clearfix">
		        <div class="pro-cycle">
		          <h3>投资周期</h3>
		          <div class="data"><span>${loanInfo.cycle}</span>个月</div>
		        </div>
		        <div class="pro-money">
		          <h3>剩余可投金额</h3>
		          <div class="data">
					<span>${loanInfo.leftProductMoney}</span>元
				  </div>
		        </div>
		      </div>
		      <div class="pro-btn">     
				<a href="${pageContext.request.contextPath}/loan/loanInfo?id=${loanInfo.id}" class="btn-1">立即投资</a><!--已满标按钮-->
		      </div>
		    </div>
		  </div>
	  </c:forEach>
	  
	  <div style="clear:both"></div>
      <!--页码 start-->
	  <table class="page_bar">
		<tbody>
		<tr>
			<td>
				共${totalRows}条${totalPage}页　当前为第${currentPage}页　
			<c:choose>
			<c:when test="${currentPage eq 1}">
				首页
				上一页
			</c:when>
			<c:otherwise>
				<a id="lnkNext" href="${pageContext.request.contextPath}/loan/loan?ptype=${ptype}">首页</a>
				<a id="lnkNext" href="${pageContext.request.contextPath}/loan/loan?ptype=${ptype}&currentPage=${currentPage-1}">上一页</a>
			</c:otherwise>
			</c:choose>
			
			<c:choose>
			<c:when test="${currentPage eq totalPage}">
				下一页
				尾页
			</c:when>
     
			<c:otherwise>
				<a id="lnkNext" href="${pageContext.request.contextPath}/loan/loan?ptype=${ptype}&currentPage=${currentPage+1}">下一页 </a>
				<a id="lnkNext" href="${pageContext.request.contextPath}/loan/loan?ptype=${ptype}&currentPage=${totalPage}">尾页</a>
			</c:otherwise>
			</c:choose>
			</td>
		</tr>
		</tbody>
	</table>
	<!--页码 end-->
  	</div>
  
	<div class="right-side">
	    <div class="side-box fixed" id="roll" style="top: 0px;">
	        <div id="advertArea"></div>
	        <!--投资排行榜begin-->
	        <div class="system-notice" style="margin-top: 0px;">
	            <div class="system-tit"><h3>投资排行榜</h3></div>
	            <ul>
	            <c:forEach items="${bidUserTopList}" var="topUser" varStatus="index">
	            	<li><span>${index.count}.&nbsp;&nbsp;${fn:substring(topUser.phone, 0, 3)}******${fn:substring(topUser.phone, 9,11 )}&nbsp;${topUser.score}</span></li>
	            </c:forEach>
	            </ul>
	        </div>
	        <!--投资排行榜end-->
	        <!--广告位begin-->
	        <div style="margin-top:20px;"><a href="${pageContext.request.contextPath}/"><img src="${pageContext.request.contextPath}/images/ad.jpg" alt=""/></a></div>
	        <!--广告位end-->
	    </div>
	</div>
	</div> 
</div>
<!--产品列表end-->

<!--页脚start-->
<jsp:include page="commons/footer.jsp"/>
<!--页脚end-->
</body>
</html>

后台代码：

VO对象

package com.bjpowernode.p2p.model.vo;

import java.io.Serializable;
import java.util.List;

/**
 * ClassName:PaginatinoVO
 * Package:com.bjpowernode.p2p.model.vo
 * Description:
 *
 * @date:2018/9/18 12:10
 * @author:guoxin@bjpowernode.com
 */
public class PaginatinoVO<T> implements Serializable {

    /**
     * 总记录条数
     */
    private Long total;

    /**
     * 显示数据
     */
    private List<T> dataList;

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<T> getDataList() {
        return dataList;
    }

    public void setDataList(List<T> dataList) {
        this.dataList = dataList;
    }
}

mvc的 controller层

@RequestMapping(value = "/loan/loan")
    public String loan(HttpServletRequest request,Model model,
                       @RequestParam (value = "ptype",required = false) Integer ptype,
                       @RequestParam (value = "currentPage",required = false) Integer currentPage) {

        //判断当前页码是否为空，为空，默认值为第1页
        if (null == currentPage) {
            //默认为第1页
            currentPage = 1;
        }

        //准备分页查询参数
        Map<String,Object> paramMap = new HashMap<String,Object>();

        if (null != ptype) {
            //产品类型
            paramMap.put("productType",ptype);
        }

        int pageSize = 9;

        //起始下标
        paramMap.put("currentPage",(currentPage -1) * pageSize);

        //截取长度，每页显示条数
        paramMap.put("pageSize",pageSize);

        //分页查询产品信息列表(产品类型，页码，每页显示几条)  -> 返回分页模型对象（总记录条数、当前页要显示的数据）
        PaginatinoVO<LoanInfo> paginatinoVO = loanInfoService.queryLoanInfoByPage(paramMap);

        //计算总页数
        int totalPage = paginatinoVO.getTotal().intValue() / pageSize;

        //再次求余
        int mod = paginatinoVO.getTotal().intValue() % pageSize;
        if (mod > 0) {
            totalPage = totalPage + 1;
        }

        //总记录数
        model.addAttribute("totalRows",paginatinoVO.getTotal());
        //总页数
        model.addAttribute("totalPage",totalPage);
        //每页显示的数据
        model.addAttribute("loanInfoList",paginatinoVO.getDataList());
        //当前页码
        model.addAttribute("currentPage",currentPage);

        if (null != ptype) {
            //产品类型
            model.addAttribute("ptype",ptype);
        }

service层


    /**
     * 分页查询产品信息列表
     * @param paramMap
     * @return
     */
    PaginatinoVO<LoanInfo> queryLoanInfoByPage(Map<String, Object> paramMap);

实现类

    @Override
    public PaginatinoVO<LoanInfo> queryLoanInfoByPage(Map<String, Object> paramMap) {
        PaginatinoVO<LoanInfo> paginatinoVO = new PaginatinoVO<>();

        Long total = loanInfoMapper.selectTotal(paramMap);

        //查询总记录数
        paginatinoVO.setTotal(total);

        List<LoanInfo> loanInfoList = loanInfoMapper.selectLoanInfoByPage(paramMap);

        //查询显示数据
        paginatinoVO.setDataList(loanInfoList);


        return paginatinoVO;
    }

mapper层

   /**
     * 分页查询产品信息列表
     * @param paramMap
     * @return
     */
    List<LoanInfo> selectLoanInfoByPage(Map<String, Object> paramMap);

    /**
     * 根据产品类型获取产品的总记录数
     * @param paramMap
     * @return
     */
    Long selectTotal(Map<String, Object> paramMap);

sql语句

<!--分页查询产品信息列表-->
    <select id="selectLoanInfoByPage" resultMap="BaseResultMap">
        select
          <include refid="Base_Column_List"/>
        from
          b_loan_info
        <where>
            <if test="productType != null">
              product_type = #{productType}
            </if>
        </where>
        order by
          release_time desc
        limit #{currentPage},#{pageSize}
    </select>

    <!--根据产品类型获取产品的总记录数-->
    <select id="selectTotal" resultType="java.lang.Long">
        select
          count(*)
        from
          b_loan_info
        <where>
            <if test="productType != null">
                product_type = #{productType}
            </if>
        </where>
    </select>