jsp前端实现分页代码

Posted 2020-08-26 熊猫卡洛斯

前端需要订一page类包装，其参数为

private Integer pageSize=10; //每页记录条数=10

private Integer totalCount; //总记录条数

private Integer totalPage; //总页数

private Integer currPage; //当前页

private Integer startIndex; //开始索引

private List<M> list; //结果集

进行查询的数据set进对象，在运用ModelAndView对象

ModelAndView .addObject("page",page);

将page返回前台jsp，接受成功之后在其他页面直接引用jsp标签<jsp:include page="/page.jsp" />就可以调用

以下为jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 最下面显示跳转页面 -->
<!-- ${page.totalCount }总的记录条数  其他的类似，与Page.java相关联 -->
<div >
	
	共 <i class="blue">${page.totalCount }</i> 
	条记录，当前显示第 <i class="blue">${page.currPage }
	</i> 页 / 共 <i class="blue">${page.totalPage }</i> 页
	    跳转  
	<input type="text" class="scinput" 
	style="width: 40px;height: 20px" id="currPage2" onblur="page2()" 
	onkeyup="this.value=this.value.replace(/\D/g,‘‘)"
	onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" />  页
	
     <!-- 首页按钮，跳转到首页 -->
    <p>  <c:if test="${page.currPage <= 1 }"></c:if> 
    <a href="javascript:;" <c:if test="${page.currPage > 1 }">onclick="page1(1)"</c:if> >首页</a>
    
    
    <!-- 上页按钮，跳转到上一页 -->
    <c:if test="${page.currPage <= 1 }"></c:if> 
    <a href="javascript:;" <c:if test="${page.currPage > 1 }">onclick="page1(‘${page.currPage - 1}‘)"</c:if> >上页</a>
    
    <!-- 下页按钮，跳转到下一页 -->
     <c:if test="${page.currPage >= page.totalPage }"></c:if> 
    <a href="javascript:;" <c:if test="${page.currPage < page.totalPage }">onclick="page1(‘${page.currPage + 1}‘)"</c:if> >下页</a>
    
    <!-- 末页按钮，跳转到最后一页 -->
     <c:if test="${page.currPage >= page.totalPage }"></c:if> 
    <a href="javascript:;" <c:if test="${page.currPage < page.totalPage }">onclick="page1(‘${page.totalPage}‘)"</c:if> >末页</a>
    </p>
    </div>