Web分页通用模板

小汤猿人类

已于 2024-08-20 14:27:13 修改

阅读量436

点赞数 5

分类专栏： model 文章标签：前端

于 2024-07-25 12:05:18 首次发布

本文链接：https://blog.csdn.net/a1241436267/article/details/140686323

版权

model 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需要包含到form表单之中

<input type="hidden" name="pageNo" value="1"/>
<input type="hidden" id="totalPageCount" value="${page.totalPage}"/>
<c:import url="rollpage.jsp">
    <c:param name="totalCount" value="${page.total}"/>
    <c:param name="currentPageNo" value="${page.pageNo}"/>
    <c:param name="totalPageCount" value="${page.totalPage}"/>
</c:import>

rollpage.js 文件名不能错

function page_nav(frm,num){
		frm.pageNo.value = num;
		frm.submit();
}

function jump_to(frm,num){
    //alert(num);
	//验证用户的输入
	var regexp=/^[1-9]\d*$/;
	var totalPageCount = document.getElementById("totalPageCount").value;
	//alert(totalPageCount);
	if(!regexp.test(num)){
		alert("请输入大于0的正整数！");
		return false;
	}else if((num-totalPageCount) > 0){
		alert("请输入小于总页数的页码");
		return false;
	}else{
		page_nav(frm,num);
	}
}

rollpage.jsp 文件名不能错

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
</script>
</head>
<body>
 		<div class="page-bar">
			<ul class="page-num-ul clearfix">
				<li>共${page.total }条记录&nbsp;&nbsp; ${page.pageNo }/${page.totalPage }页</li>
				<c:if test="${page.pageNo > 1}">
					<a href="javascript:page_nav(document.forms[0],1);">首页</a>
					<a href="javascript:page_nav(document.forms[0],${page.pageNo-1});">上一页</a>
				</c:if>
				<c:if test="${page.pageNo < page.totalPage }">
					<a href="javascript:page_nav(document.forms[0],${page.pageNo+1 });">下一页</a>
					<a href="javascript:page_nav(document.forms[0],${page.totalPage });">尾页</a>
				</c:if>
				&nbsp;&nbsp;
			</ul>
		 <span class="page-go-form"><label>跳转至</label>
	     <input type="text" name="inputPage" id="inputPage" class="page-key" />页
	     <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
		</span>
		</div> 
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/rollpage.js"></script>
</html>