三、实现指定页码跳转
2018-07-15 本文已影响0人
lifeline张
一、前置案例
需求，在实现分页查询提交页面代码的时候，不通过超链接来提交，而是通过form表单提交。
因为在newsDetailList.jsp页面中，已经存在一个form表单了（这个form表单的作用是提供查询关键字的，并且提交的页面也是本页面），可以借助这个form表单来进行页码的提交。具体做法是：在这个form表单里面增加一个隐藏域，然后把页面代码给这个隐藏域，然后提交之后再去拿到这个代码即可。
所以当我点击上一页的时候，我要做两件事，首先我要提交这个form表单，其次给这个form表单里面的我的私货赋值。这两步可以用一个函数封装一下：
// 表单提交同时偷偷传递页码
function page_nav(frm, num){
frm.pageIndex.value = num;
frm.submit();
}
同时修改点击“上一页”时候的操作：
<%
if (pageIndex >1) {
%>
<a href="javaScript:page_nav(document.forms[0],1)">首页</a>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1 %>)">上一页</a>
<%} if (pageIndex < totalPage) {%>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1 %>)">下一页</a>
<a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a>
<%} %>
最后的总的代码如下：
<%@page import="cn.kgc.util.PageSupport"%>
<%@page import="cn.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="cn.kgc.Service.implement.NewsServiceImpl"%>
<%@page import="cn.kgc.Service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%--动态包含无法使用，页面报错，newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%@include file="../common/common.jsp" %>
<!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">
<title>无标题文档</title>
<style type="text/css">
<!--
-->
</style>
<script>
function addNews(){
window.location="newsDetailCreateSimple.jsp";
}
// 表单提交同时偷偷传递页码
function page_nav(frm, num){
frm.pageIndex.value = num;
frm.submit();
}
</script>
</head>
<body>
<!--主体-->
<div class="main-content-right">
<!--即时新闻-->
<div class="main-text-box">
<div class="main-text-box-tbg">
<div class="main-text-box-bbg">
<form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
<div>
新闻分类：
<select name="categoryId">
<option value="0">全部</option>
<option value='1' >国内</option>
<option value='2' >国际</option>
<option value='3' >娱乐</option>
<option value='4' >军事</option>
<option value='5' >财经</option>
<option value='6' >天气</option>
</select>
新闻标题<input type="text" name="title" id="title" value=''/>
<button type="submit" class="page-btn">GO</button>
<button type="button" onclick="addNews();" class="page-btn">增加</button>
<input type="hidden" name="pageIndex" value="1"/>
</div>
</form>
<table cellpadding="1" cellspacing="1" class="admin-list">
<thead >
<tr class="admin-list-head">
<th>新闻标题</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<%
// 当前页码不能写死，不然根本没法跳转
String currentPage = request.getParameter("pageIndex");
%>
<script>
alert(currentPage);
</script>
<%
// 分页查询并显示
if (currentPage == null || currentPage.equals("")){
// 代表用户首次访问页面
currentPage = "1";
}
int pageIndex = Integer.parseInt(currentPage);
// 获取新闻总数量
int totalCount = newsService.getTotalCount();
// 每页显示几条新闻，页面容量
int pageSize = 2;
// 获取总页数
PageSupport ps = new PageSupport();
ps.setCurrentPageNo(pageIndex);
ps.setPageSize(pageSize);
ps.setTotalCount(totalCount);
// 拿到总页数
int totalPage = ps.getTotalPageCount();
if (pageIndex < 1) {
pageIndex = 1;
} else if (pageIndex > totalPage) {
pageIndex = totalPage;
}
List<News> newsList = newsService.getPageNewsList(pageIndex, pageSize);
int i= 0;
for(News news:newsList){
i++;
%>
<tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
<td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
<td><%=news.getAuthor() %></td>
<td><%=news.getCreateDate() %></td>
<td><a href='adminNewsCreate.jsp?id=2'>修改</a>
<a href="javascript:if(confirm('确认是否删除此新闻？')) location='adminNewsDel.jsp?id=2'">删除</a>
</td>
</tr>
<%} %>
</tbody>
</table>
<div class="page-bar">
<ul class="page-num-ul clearfix">
<li>共<%=totalCount %>条记录 <%=pageIndex %>/<%=totalPage %>页</li>
<%
if (pageIndex >1) {
%>
<a href="javaScript:page_nav(document.forms[0],1)">首页</a>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1 %>)">上一页</a>
<%} if (pageIndex < totalPage) {%>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1 %>)">下一页</a>
<a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a>
<%} %>
</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>
</div>
</div>
</div>
</div>
</body></html>
二、指定页码跳转
实现思路是当用户输入要跳转的页面的时候，获取到这个输入的值，然后就可以通过上面前置案例提供的方法直接提交就好了，页面就可以跳转了。
实现代码如下：
<span class="page-go-form"><label>跳转至</label>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<!-- 下面这个代码的意思是在点击的时候调用一个函数，
这个函数有两个参数，第一个参数是本页面的第一个表单，
第二个参数是上面的名字为inputPage的框的值
-->
<button type="button" class="page-btn" onClick="javaScript:page_nav(document.forms[0],document.getElementById('inputPage').value)">GO</button>
但是这样做的坏处在于没有进行验证，也就是说不管用户输入个什么值进去都直接被提交了。
所以这个地方可以写一个新的函数，目的就在于对用户的输入进行验证。
验证第一需要验证是否是数字，此时可以用正则表达式。第二需要验证数字是否大于总页面数，此时需要获得总页面数，所以可以在页面中再设置一个隐藏标签，当计算完总页面数的时候直接把总页面数的值赋这个标签。这样的话，在该函数里面就可以直接去拿这个标签的值了。
最终代码如下：
<%@page import="cn.kgc.util.PageSupport"%>
<%@page import="cn.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="cn.kgc.Service.implement.NewsServiceImpl"%>
<%@page import="cn.kgc.Service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%--动态包含无法使用，页面报错，newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%@include file="../common/common.jsp" %>
<!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">
<title>无标题文档</title>
<style type="text/css">
<!--
-->
</style>
<script>
function addNews(){
window.location="newsDetailCreateSimple.jsp";
}
// 表单提交同时偷偷传递页码
function page_nav(frm, num){
frm.pageIndex.value = num;
frm.submit();
}
// 提交Go跳转，跳转前对数字进行有效性验证，如果数字输入正确
// 才进行跳转
function jump_to(frm,pageno){
//var regexp=/^\d+$/;
var regexp=/^[1-9]\d*$/;
var totalPage = document.getElementById("totalPage").value;
if(!regexp.test(pageno)){
alert("请输入 正确的数字！");
return false;
}else if((pageno-totalPage) > 0){
alert("总页码一共"+totalPage+"页，请输入正确的页码！");
return false;
}else{
page_nav(frm,pageno);
}
}
</script>
</head>
<body>
<!--主体-->
<div class="main-content-right">
<!--即时新闻-->
<div class="main-text-box">
<div class="main-text-box-tbg">
<div class="main-text-box-bbg">
<form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
<div>
新闻分类：
<select name="categoryId">
<option value="0">全部</option>
<option value='1' >国内</option>
<option value='2' >国际</option>
<option value='3' >娱乐</option>
<option value='4' >军事</option>
<option value='5' >财经</option>
<option value='6' >天气</option>
</select>
新闻标题<input type="text" name="title" id="title" value=''/>
<button type="submit" class="page-btn">GO</button>
<button type="button" onclick="addNews();" class="page-btn">增加</button>
<input type="hidden" name="pageIndex" value="1"/>
</div>
</form>
<table cellpadding="1" cellspacing="1" class="admin-list">
<thead >
<tr class="admin-list-head">
<th>新闻标题</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<%
// 当前页码不能写死，不然根本没法跳转
String currentPage = request.getParameter("pageIndex");
// 分页查询并显示
if (currentPage == null || currentPage.equals("")){
// 代表用户首次访问页面
currentPage = "1";
}
int pageIndex = Integer.parseInt(currentPage);
// 获取新闻总数量
int totalCount = newsService.getTotalCount();
// 每页显示几条新闻，页面容量
int pageSize = 2;
// 获取总页数
PageSupport ps = new PageSupport();
ps.setCurrentPageNo(pageIndex);
ps.setPageSize(pageSize);
ps.setTotalCount(totalCount);
// 拿到总页数
int totalPage = ps.getTotalPageCount();
if (pageIndex < 1) {
pageIndex = 1;
} else if (pageIndex > totalPage) {
pageIndex = totalPage;
}
List<News> newsList = newsService.getPageNewsList(pageIndex, pageSize);
int i= 0;
for(News news:newsList){
i++;
%>
<input type="hidden" id="totalPage" value=<%=totalPage %>/>
<tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
<td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
<td><%=news.getAuthor() %></td>
<td><%=news.getCreateDate() %></td>
<td><a href='adminNewsCreate.jsp?id=2'>修改</a>
<a href="javascript:if(confirm('确认是否删除此新闻？')) location='adminNewsDel.jsp?id=2'">删除</a>
</td>
</tr>
<%} %>
</tbody>
</table>
<div class="page-bar">
<ul class="page-num-ul clearfix">
<li>共<%=totalCount %>条记录 <%=pageIndex %>/<%=totalPage %>页</li>
<%
if (pageIndex >1) {
%>
<a href="javaScript:page_nav(document.forms[0],1)">首页</a>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex-1 %>)">上一页</a>
<%} if (pageIndex < totalPage) {%>
<a href="javaScript:page_nav(document.forms[0],<%=pageIndex+1 %>)">下一页</a>
<a href="javaScript:page_nav(document.forms[0],<%=totalPage%>)">最后一页</a>
<%} %>
</ul>
<span class="page-go-form"><label>跳转至</label>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<!-- 下面这个代码的意思是在点击的时候调用一个函数jump_to
这个函数有两个参数，第一个参数是本页面的第一个表单，
第二个参数是上面的名字为inputPage的框的值
-->
<button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
</span>
</div>
</div>
</div>
</div>
</div>
</body></html>
在上面代码书写的过程中出现了一个bug，就是当输入错误的时候无法给出提示。原因在于在jump_to函数去拿总页面数的时候我使用的方法是document.getElementById("totalPage").value;但是我页面的隐藏标签的属性中却没有id，所以才拿不到值，无法给出提示。
注：在函数jump_to中，要进行页面总数跟当前页面的大小判断的时候，如果条件写为：pageno>totalPage，则在前台进行页面跳转的时候，如果输入的数字大于总页数，则会进行跳转，但是跳不回来了，不知道为什么。
