JSP--公用分页模块+数字分页

分页导航与跳转实现

最新推荐文章于 2022-01-13 16:44:56 发布

原创最新推荐文章于 2022-01-13 16:44:56 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jsp

本文详细介绍了如何使用 JSP 实现分页导航及跳转功能，包括隐藏字段设置、页面数量显示、上一页与下一页链接创建，以及通过 JavaScript 实现页面跳转。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:if test="${web.page!=null}">
<div class="fenye search">
<p>
<input type="hidden" name="page.pageSize" value="${web.page.pageSize }"/>
<input type="hidden" name="page.recordCount" id="pageCount" value="${web.page.pageCount }"/>
<span> 共${web.page.pageCount}页，第${web.page.currentPage }页</span>
<a href="javascript:goTOPage(${web.page.currentPage-1 })" class="f_prev">上一页</a>
<c:if test="${web.page.currentPage-3 <= web.page.pageCount && web.page.currentPage > 2}"><a href="javascript:goTOPage(1)" <c:if test="${web.page.currentPage==1 }">class="active"</c:if>>1</a><a href="javascript:;">...</a></c:if>
<c:forEach begin="0" end="${web.page.pageCount-1}" varStatus="status"><c:if test="${web.page.currentPage - status.index >= -1 && web.page.currentPage <= status.index+2}"><a <c:if test="${web.page.currentPage==status.index + 1 }">class="active"</c:if> href="javascript:goTOPage(${status.index+1 })">${status.index+1 }</a></c:if></c:forEach>
<c:if test="${web.page.currentPage+2 < web.page.pageCount}"><a href="javascript:;">...</a><a href="javascript:goTOPage(${web.page.pageCount })">${web.page.pageCount }</a></c:if>
<a href="javascript:goTOPage(${web.page.currentPage+1 })" class="f_next">下一页</a>
到<input type="text" name="page.currentPage" id="pagecurrentPage" size="2" value="${web.page.currentPage }"/>页
<input type="button" class="button" onclick="goTOPage(document.getElementById('pagecurrentPage').value)" value="跳转"  />
</p>
</div>
<script>
    function goTOPage(num){
        if(num>0&&num<=document.getElementById("pageCount").value){
            document.getElementById("pagecurrentPage").value = num;
            if('${web.page.pageFormName}'!=''){
                alert(document.forms['${web.page.pageFormName}'].action);
                document.forms['${web.page.pageFormName}'].submit();
            }else{
                document.forms[0].submit();
            }
        }
    }
</script>
</c:if>

page实体参数

private int pageSize;// 每页显示的条数
	private int recordCount;// 总共的条数
	private int currentPage;// 当前页面
	private String pageFormName;// 分页表单名
	private int pageCount;

开发者博客：www.developsearch.com