分页表示-CSDN博客

本文链接：https://blog.csdn.net/xxxvshell/article/details/84481129

分页相关link，通过导入的jsp实现

<%@ include file="/jsp/compager.jsp" %>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>

<div id="pager"<c:if test="${empty queryResult.resultList}">style="display: none;"</c:if>>
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="smallContent">&nbsp;AllResult ${queryResult.totalSize}; ${queryResult.startNo}～${queryResult.endNo}</td>

		<!-- first To currPage-->
		<c:if test="${queryResult.pageNo gt 1}">
			<td class="smallCount">&nbsp;&nbsp;<a οnclick="selPage('1')">&lt&lt</a></td>
			<td class="smallCount">&nbsp;&nbsp;<a id ="btn_prev">&lt</a></td>
			<c:if test="${queryResult.pageNo-1 le 10}">
				<c:forEach var="num" varStatus="loopStatus" begin="1" end="${queryResult.pageNo-1}">
					<td class="smallCount">
						&nbsp;&nbsp;<a οnclick="selPage('${loopStatus.index}')">${loopStatus.index}</a>
					</td>
				</c:forEach>
			</c:if>
			<c:if test="${queryResult.pageNo-1 gt 10}">
				<c:forEach var="num" varStatus="loopStatus" begin="${queryResult.pageNo-10}" end="${queryResult.pageNo-1}">
					<td class="smallCount">
						&nbsp;&nbsp;<a οnclick="selPage('${loopStatus.index}')">${loopStatus.index}</a>
					</td>
				</c:forEach>
			</c:if>
		</c:if>
		
		<!-- currPage -->
		<td class="smallCount">&nbsp;&nbsp;${queryResult.pageNo}</td>
		
		<!-- currPage To EndPage-->
		<c:if test="${queryResult.pageNo lt queryResult.totalPage}">
			<c:if test="${queryResult.totalPage-queryResult.pageNo le 10}">
				<c:forEach var="num" varStatus="loopStatus" begin="${queryResult.pageNo+1}" end="${queryResult.totalPage}">
					<td class="smallCount">
						&nbsp;&nbsp;<a οnclick="selPage('${loopStatus.index}')">${loopStatus.index}</a>
					</td>
				</c:forEach>
			</c:if>
			<c:if test="${queryResult.totalPage-queryResult.pageNo gt 10}">
				<c:forEach var="num" varStatus="loopStatus" begin="${queryResult.pageNo+1}" end="${queryResult.pageNo+10}">
					<td class="smallCount">
						&nbsp;&nbsp;<a οnclick="selPage('${loopStatus.index}')">${loopStatus.index}</a>
					</td>
				</c:forEach>
			</c:if>
			<td class="smallCount">&nbsp;&nbsp;<a id ="btn_next">&gt</a></td>
			<td class="smallCount">&nbsp;&nbsp;<a οnclick="selPage('${queryResult.totalPage}')">&gt&gt</a></td>
		</c:if>
    </tr>
  </table>
	<input type="hidden" id="pageNo" name="pageNo" value="${queryResult.pageNo}"/>
</div>

JavaScript 添加

 $(function(){
	    //　page
		var pageNo = $("#pageNo").val();
		$("#btn_prev").click(function(){
			document.forms[0].action = "${contextPath}testSearchAction.action";
			pageNo = parseInt(pageNo)-1;
			$("#pageNo").val(pageNo);
			document.forms[0].submit();
			return false;
		});
		$("#btn_next").click(function(){
			document.forms[0].action = "${contextPath}testSearchAction.action";
			pageNo = parseInt(pageNo)+1;
			$("#pageNo").val(pageNo);
			document.forms[0].submit();
			return false;
		});
	});
	
	//　PageChange
	function selPage(pageNo){
		document.forms[0].action = "${contextPath}testSearchAction.action";
		$("#pageNo").val(pageNo);
		document.forms[0].submit();
		return false;
	}