jsp实现上一页下一页翻页功能(示例代码)
程序员文章站
2022-07-12 08:30:50
前段时间一直忙于期末考试和找实习，好久没写博客了。
这段时间做了个小项目，包含了翻页和富文本编辑器ueditor的两个知识点,ueditor玩的还不是很深，打算玩深后再写...
前段时间一直忙于期末考试和找实习，好久没写博客了。
这段时间做了个小项目，包含了翻页和富文本编辑器ueditor的两个知识点,ueditor玩的还不是很深，打算玩深后再写篇博客。
要实现翻页功能，只需要设置一个pageindex即可，然后每次加载页面时通过pageindex去加载数据就行。
那么我们可以设置一个隐藏的input框，用于传递pageindex给下个页面。
当我们点击上一页的时候，通过js方法改变pageindex的值，再提交表单即可
二话不多说，看代码，代码里面写的还算比较清楚。
这个是index.jsp的代码。
index.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 wu</title>
<link rel="stylesheet" href="css/basic.css" rel="external nofollow" >
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
</head>
<body>
<%
int allrecord=0;//总的记录条数,不包含查询后的
int totalrecord=0;//总的记录条数,包含查询后的
int totalpage=1;//总的页面数，包含查询后的
int pageindex=1;//当前页面号，用于控制页面翻转，默认为1
list<record> 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" rel="external nofollow" rel="external nofollow" target="_blank">notebook of eric wu</a></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" rel="external nofollow" rel="external nofollow" >首页</a></li>
<li><a href="add.jsp" rel="external nofollow" >新增</a></li>
<li><a href="change.jsp" rel="external nofollow" >修改</a></li>
<li><a href="delete.jsp" rel="external nofollow" >删除</a></li>
</ul>
<div id="stats">
记录-<%=allrecord %>
</div><!--end: stats 状态-->
</div><!-- end: navigator 导航栏 -->
</div><!-- end: header 头部 -->
<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.jpg" 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=<%= r.getid() %>" rel="external nofollow" 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);" rel="external nofollow" rel="external nofollow" class="turnpage" onclick="turntoppage()">上一页</a>
<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnpage" onclick="turnbottompage()">下一页</a>
</td>
</tr>
</table>
</div><!-- end: content 内容 -->
</div><!-- end: main 主要部分 -->
<div id="footer">
copyright ©2017 汕大-吴广林
</div><!-- end: footer底部-->
</div><!-- end: home 自定义的最大容器 -->
</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>
效果图
翻页后：pageindex=1
翻页后：pageindex=2
以上这篇jsp实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。