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;//当前页面号，用于控制页面翻转，默认为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" 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 %>条记录
共<%= 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><!-- 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实现上一页下一页翻页功能的更多相关文章
- Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14
这是简易数据分析系列的第 14 篇文章. 今天我们还来聊聊 Web Scraper 翻页的技巧. 这次的更新是受一位读者启发的,他当时想用 Web scraper 爬取一个分页器分页的网页,却发现我之 ...
- 简易数据分析 12 | Web Scraper 翻页——抓取分页器翻页的网页
这是简易数据分析系列的第 12 篇文章. 前面几篇文章我们介绍了 Web Scraper 应对各种翻页的解决方法,比如说修改网页链接加载数据.点击"更多按钮"加载数据和下拉自动加载 ...
- thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享
前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...
- 使用Python在自己博客上进行自动翻页
先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...
- Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php
)------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...
- Android 滑动效果高级篇（七）—— 华丽翻页效果
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...
- Android水平(横向)翻页列表,类似水平GridVIew
Android水平(横向)翻页列表,类似于水平方向的GridView,行列自定义,但要翻页切换,考虑加载性能,当Item数据很多时加载和翻页要流畅,翻页时要有动画效果,效果图如下: 实现方式: 1:翻 ...
- Android电子书翻页效果实现
这篇文章是在参考了别人的博客基础上,修改了其中一个翻页bug,并且加了详细注释 先看效果 其中使用了贝赛尔曲线原理,关于贝赛尔曲线的知识,推荐大家看下http://blog.csdn.net/hmg2 ...
- selenium 之百度搜索，结果列表翻页查询
selenium之百度搜索,结果列表翻页查询 by:授客 QQ:1033553122 实例:百度搜索,结果列表翻页查询 解决问题:解决selenium driver获取web页面元素时,元素过期问题 ...
- Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本 项目版本记录.1 2. Easyui 的翻页组件2 ...
随机推荐
- grant all赋权后mysql.user表权限字段还是N,但能登录和新建表
grant all赋权后mysql.user表权限字段还是N,但能登录和新建表 grant all privileges on linuxeye.* to linuxeye@'localhost' i ...
- poi jsp xls
poi jsp xls <%@ page language="java" pageEncoding="UTF-8"import="java.ut ...
- javascript基础-表单
图解: 表单只需要知道常用的,其他的了解原理就行.在实际项目中,序列化一般用库(jquery)带的方法.富文本引用组件.
- VR全景智慧城市，完美的将虚拟与现实结合
很多人都粗浅的认为,VR虚拟智慧城市只是简单的将智慧城市和虚拟现实相结合的产物,这样的VR虚拟智慧城市看起来更像是个VR内容产品,而非城市建设成果.但是我们换个角度来思考的话,现在很多VR虚拟智慧城市 ...
- STM32伺服编码器接口
在STM32的高级定时器和一般定时器中有Encoder interface mode(编码器接口),TI1和TI2分别对应TIM_CH1 和TIM_CH2 通道. 一.计数规则如下: 表55的是编码器 ...
- ABP入门系列（18）—— 使用领域服务
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1.引言 自上次更新有一个多月了,发现越往下写,越不知如何去写.特别是当遇到DDD中一些概念术语的 ...
- 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- JQuery--Ajax 异步操作 动态添加节点 (新人试水，求支持)
异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码: $(function () { var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀 s ...
- WPF MVVM 架构 Step By Step(6)（把actions从view model解耦）
到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击but ...
- RSA加密通信小结（三）--生成加解密所需的SSL命令与流程
在iOS中使用RSA加密解密,需要用到.der和.p12后缀格式的文件,其中.der格式的文件存放的是公钥(Public key)用于加密,.p12格式的文件存放的是私钥(Private key)用于 ...