前段时间一直忙于期末考试和找实习，好久没写博客了。

这段时间做了个小项目，包含了翻页和富文本编辑器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"><link rel="stylesheet" href="css/index.css">
</head>
<body>
<%int allRecord=0;//总的记录条数,不包含查询后的int totalRecord=0;//总的记录条数,包含查询后的int totalPage=1;//总的页面数，包含查询后的int pageIndex=1;//当前页面号，用于控制页面翻转，默认为1List<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" 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">首页</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><!--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.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=<%= r.getId() %>"  target="_blank"><%= r.getTitle() %></a></td><td class="center"><%= r.getTime() %></td></tr><%    }}%><tr class="alt" ><td class="center" colspan="3">共<%= totalRecord %>条记录&nbsp;&nbsp;&nbsp;共<%= totalPage %>页&nbsp;&nbsp;&nbsp;每页10条&nbsp;&nbsp;&nbsp;当前第<%= pageIndex %>页&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一页</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一页</a>&nbsp;&nbsp;&nbsp;</td></tr></table></div><!-- end: content 内容 --></div><!-- end: main 主要部分 --><div id="footer">     Copyright &copy;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

更多专业前端知识，请上【猿2048】www.mk2048.com

python翻页_python实现电子书翻页小程序
本文实例为大家分享了python实现电子书翻页的具体代码,供大家参考,具体内容如下 1.题目: 电子书翻页: (1)自动翻页:每次默认读三行,读完之后睡两秒,直到把所有内容全部读出来 (2)手动翻页: ...
怎么用vue2实现上一题下一题的答题功能
可以使用Vue2中提供的v-if,v-for和v-show指令来实现上一题下一题的答题功能.首先,可以使用v-for指令来遍历所有的题目,然后使用v-if和v-show指令来控制显示哪一题.最后,可以 ...
上传pdf文件转图片翻页小工具，遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
tp5 实现文章上一篇和下一篇翻页
文章翻页功能,为了避免id加一和减一不存在的情况,通过tp5 where条件查询实现同时查出所有id的集合存放在数组,当id为第一个的时候,最后一篇即上一篇,当id为最后一个,下一篇就是第一篇,实 ...
jq实现鼠标滚动的时候上下翻页，动画在翻页的时候才会执行
以前一直想自己写几篇属于自己博客,但是由于工作原因以及一些生活的上的因素,导致一直都没能如愿,今天加班,正好事儿还没过来,真好留了时间给我写一篇博客. 在上一家公司的时候,主要从事的是移动端的开发,由 ...
【Python爬虫】：爬取干货集中营上的全部美女妹子（翻页处理）
一.确定爬取思路今天突发奇想,能不能使用python爬虫来爬取一些妹子图片呢,于是摩拳擦掌开始干了起来.首先打开python基础教程网页htttps://gank.io 当中的妹子专栏, 发现里面全 ...
vue上下全屏翻页_全屏翻页布局
vue上下全屏翻页 View demo 查看演示Download Source 下载源 We have received a couple of requests on how to use the ...
android 自动翻页插件,网页自动翻页Chrome插件下载
AutoPagerize是一款在谷歌浏览器上运行的网页自动翻页chrome插件,AutoPagerize插件可以让你通过鼠标滚轮翻页.当你的鼠标滚轮滚动到页面底部时,再向下就会发现下一页的内容.操作简 ...
html 翻页效果,JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的 ...
Web Scraper 翻页——抓取分页器翻页的网页（Web Scraper 高级用法）| 简易数据分析 12
这是简易数据分析系列的第 12 篇文章. 前面几篇文章我们介绍了 Web Scraper 应对各种翻页的解决方法,比如说修改网页链接加载数据.点击"更多按钮"加载数据和下拉自动加载 ...

jsp实现上一页下一页翻页功能

index.jsp

效果图

jsp实现上一页下一页翻页功能相关推荐

最新文章

热门文章