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

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

这段时间做了个小项目,包含了翻页和富文本编辑器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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记之postgresql

/*************************************************************************创建人&#xff1a;LYK 创建时间&#xff1a;2019/05/05 14:47IDE: vs2013 库版本&#xff1a;32位 静态库数据库管理平台 pgAdmin III -- postgresql 注意事项&#xff1a;1&#xff0c;添加头文件…

Delphi关于多线程同步的一些方法

(注&#xff1a;本文为转载 http://hi.baidu.com/navy1130/blog/item/468fcdc448794fce38db49ee.html)线程是进程内一个相对独立的、可调度的执行单元。一个应用可以有一个主线程&#xff0c;一个主线程可以有多个子线程&#xff0c;子线程还可以有自己的子线程&#xff0c;这…

自定义Cassandra数据类型

在博客文章《 从Java连接到Cassandra》中 &#xff0c;我提到了用Java 实现的Cassandra Java开发人员的一个优势是能够创建自定义 Cassandra数据类型 。 在这篇文章中&#xff0c;我将详细介绍如何执行此操作。 Cassandra具有许多内置的数据类型 &#xff0c;但是在某些情况下…

Linux下如何查看版本信息

Linux下如何查看版本信息 Linux下如何查看版本信息&#xff0c; 包括位数、版本信息以及CPU内核信息、CPU具体型号等等&#xff0c;整个CPU信息一目了然。一些常用的 Linux 命令 1、# uname &#xff0d;a &#xff08;Linux查看版本当前操作系统内核信息&#xff09; [hadoopa…

Docker的安装及注意事项

Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从Apache2.0协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#…

基于CSS的个人网页

前端时间做的CSS作业&#xff1a;基于CSS的个人网页 基于CSS的个人网页 效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>吴广林的个人博客</title><link rel"styles…

不重复int数组里找不存在的值

有这么一道题&#xff0c;一个int数组叫A&#xff0c;里面的数是不重复的&#xff0c;从中拿出一个值&#xff0c;剩下的数组就B&#xff0c;问拿出的是哪个数。 一般人都能想到把A数组值相加&#xff0c;假设和为sum1&#xff0c;再把B数组值相加&#xff0c;设其和为sum2&…

Java验证(javafx)

验证是核心javafx框架所缺少的一件事。 为了填补这一空白&#xff0c; controlsfx中已经存在一个第三方验证库 。 但是&#xff0c;我有一个问题&#xff1a;它不是在考虑FXML的情况下创建的。 这并不是说它不是一个很好的库&#xff0c;只是错过了这个细节&#xff0c;对我来说…

WAP自助建站 我编程之路的启蒙

如题所示的这篇文章是我心血来潮在网上搜索到的&#xff0c;写的挺让我感同身受的&#xff0c;不妨先看一下原文吧。 原文 不知是偶然还是“冥冥定数”&#xff0c;最后一次访问娃派建站&#xff08;wap.ai&#xff09;已有数十月之久了&#xff0c;突然心血来潮想看看曾经的建…

React事件绑定几种方法测试

前提 es6写法的类方法默认没有绑定this&#xff0c;不手动绑定this值为undefined。 因此讨论以下几种绑定方式。 一、构造函数constructor中用bind绑定 class App extends Component {constructor (props) {super(props)this.state {t: t}// this.bind1 this.bind1.bind(…

初始socket模块和巧解粘包问题

1.什么是socket&#xff1f; 两个进程如果需要进行通讯最基本的一个前提能够唯一的标示一个进程&#xff0c;在本地进程通讯中我们可以使用PID来唯一标示一个进程&#xff0c;但PID只在本地唯一&#xff0c;网络中的两个进程PID冲突几率很大&#xff0c;这时候我们需要另辟它径…

100325 雨

回家以后怎么样&#xff1f; 感冒没有严重吧&#xff1f; 你也多喝水 我好些了 鼻涕不像昨天那么多了 就是嗓子疼 药吃了 喝了不少水了转载于:https://www.cnblogs.com/loverain/archive/2010/03/25/1694567.html

Java的挥发性修饰符

不久前&#xff0c;我编写了一个Java servlet过滤器&#xff0c;该过滤器在其init函数中加载配置&#xff08;基于web.xml的参数&#xff09;。 筛选器的配置缓存在私有字段中。 我在字段上设置了volatile修饰符。 后来&#xff0c;当我检查Sonar公司以查看是否在代码中发现任…

webpack常用loader和plugin及打包速度优化

优化 或 也可以用&#xff1a; 备用&#xff1a; 慎用的配置&#xff0c;用的不好会增加打包时间&#xff1a; 代码丑化插件&#xff1a; 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

nvl 函数

nvl(oie.is_eval,N) <> Y 理解成 oie.is_eval <> Y 转载于:https://www.cnblogs.com/wangchuanfu/p/10818274.html

在自定义HttpHandler中如何使用Session

今天我写了一段程序在HttpHandler中使用Session。结果Session对象报错&#xff0c;“未将对象引用设置到对象的实例”&#xff0c;我郁闷半天&#xff0c;不知道怎么回事。结果我google了一下&#xff0c;原来也有人碰到过这种情况哦。呵呵。网上也有很多人说出了这些问题。解决…

SSH登录太慢(等很久才提示输入密码)的问题

SSH登录太慢(等很久才提示输入密码)的问题 SSH 登录太慢可能是 DNS 解析的问题&#xff0c;默认配置下 sshd 初次接受 ssh 客户端连接的时候会自动反向解析客户端 IP 以得到 ssh 客户端的域名或主机名。 如果这个时候 DNS 的反向解析不正确&#xff0c;sshd 就会等到 DNS 解析超…

开发Eclipse插件

最近&#xff0c;我开始与团队合作开发Eclipse插件。 团队开发了一个很棒的插件&#xff0c;可以实现预期的目的。 因此&#xff0c;我签出了源并尝试构建它。 项目源包含所有必需的库&#xff0c;并且只能在Eclipse中构建。 在当今不断交付的世界中&#xff0c;这是一个主要障…

react-native 热更新react-native-pushy集成遇到的问题

主要步骤按官方文档实现&#xff0c;这里只记录遇到的一些小坑 官方文档 run-android时NDK报错 前提是NDK已安装并且环境变量已设置 根据报错提示在 android/local.properties文件里加入ndk.dir~/Library/Android/android-ndk-r10e //这里改成你自己的ndk路径 cxxbridge找…

[转]在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录...

[转]在资源管理器中使鼠标右键增加一个命令&#xff0c;运行cmd&#xff0c;同时使得当前路径为资源管理器当前的目录 http://www.cnblogs.com/skywind/archive/2009/05/22/1487138.html 1,找开注册表编辑器&#xff1b; 2,找到HKEY_CLASSES_ROOT\Folder\shell&#xff1b; 3,在…