jsp实现上一页下一页翻页功能
2021-06-22 21:04
标签：imp input框 parameter enc otto 转换 改变 页面 title 前段时间一直忙于期末考试和找实习，好久没写博客了。 这段时间做了个小项目，包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深，打算玩深后再写篇博客。 要实现翻页功能，只需要设置一个pageIndex即可，然后每次加载页面时通过pageIndex去加载数据就行。 那么我们可以设置一个隐藏的input框，用于传递pageIndex给下个页面。 当我们点击上一页的时候，通过js方法改变pageIndex的值，再提交表单即可 二话不多说，看代码，代码里面写的还算比较清楚。 这个是index.jsp的代码。 翻页后：pageIndex=1 翻页后：pageIndex=2 jsp实现上一页下一页翻页功能 标签：imp input框 parameter enc otto 转换 改变 页面 title 原文地址：http://www.cnblogs.com/wuguanglin/p/fanye.htmlindex.jsp
@page import="Bean.DBBean"%>
@page import="Entity.Record"%>
@page import="java.util.List"%>
@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
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>NoteBook of Eric Wutitle>
link rel="stylesheet" href="css/basic.css">
link rel="stylesheet" href="css/index.css">
head>
body>
int allRecord=0;//总的记录条数,不包含查询后的
int totalRecord=0;//总的记录条数,包含查询后的
int totalPage=1;//总的页面数，包含查询后的
int pageIndex=1;//当前页面号，用于控制页面翻转，默认为1
ListRecord> records=null;
DBBean db=new DBBean();
allRecord=db.getRecordCount();
totalRecord=db.getRecordCount();
totalPage=(totalRecord-1)/10+1;
if(request.getParameter("pageIndex")!=null){//不是第一次加载
//要做下数据类型转换
pageIndex=Integer.valueOf(request.getParameter("pageIndex"));
if(request.getParameter("keyword")!=null){
String keyword=request.getParameter("keyword");
records=db.getRecords(pageIndex,keyword);//获取查询内容一页的事件记录集,共10条
totalRecord=db.getRecordCount(keyword);
totalPage=(totalRecord-1)/10+1;
}else{
records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
}
}else{//第一次加载
records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
}
session.setAttribute("records", records);//便于后面使用
%>
div id="home">
div id="header">
div id="WebTitle">
div class="maintitle">a href="index.jsp" target="_blank">NoteBook of Eric Wua>div>
div class="subtitle">The palest ink is better than the best memory !div>
div>
div id="navigator">
ul id="navList">
li>a href="index.jsp">首页a>li>
li>a href="add.jsp">新增a>li>
li>a href="change.jsp">修改a>li>
li>a href="delete.jsp">删除a>li>
ul>
div id="Stats">
记录-=allRecord %>
div>
div>
div>
div id="main">
div id="content">
form id="searchForm" name="searchForm" action="index.jsp" method="get">
input type="hidden" name="pageIndex" id="pageIndex" value="1">
div id="search">
div class="center">div>
input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录">
img src="img/search.png" onclick="searchKeyword();" class="button">
div>
form>
table>
tr>
th width="10%">序号th>
th width="60%">标题th>
th width="30%">时间th>
tr>
int count=0;
if(records!=null){
for(Record r: records){
count++;
%>
tr>
td class="center">= count %>td>
td>a href="content.jsp?recordId=" target="_blank">= r.getTitle() %>a>td>
td class="center">= r.getTime() %>td>
tr>
}
}
%>
tr class="alt" >
td class="center" colspan="3">
共= totalRecord %>条记录
共= totalPage %>页
每页10条
当前第= pageIndex %>页
a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一页a>
a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一页a>
td>
tr>
table>
div>
div>
div id="footer">
Copyright ©2017 汕大-吴广林
div>
div>
body>
script type="text/javascript">
var pageIndex=pageIndex %>;
var totalPage=totalPage %>;
console.log(pageIndex);
//上一页
function turnTopPage(){
if(pageIndex==1){
return;
}else{
document.getElementById("pageIndex").value=pageIndex-1;
document.getElementById("searchForm").submit();
}
}
//下一页
function turnBottomPage(){
if(pageIndex>=totalPage){
return;
}else{
document.getElementById("pageIndex").value=pageIndex+1;
document.getElementById("searchForm").submit();
}
}
function searchKeyword(){
document.getElementById("pageIndex").value=1;
document.getElementById("searchForm").submit();
}
script>
html>
效果图
