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" 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实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JSP Spring配置文件中传值的实例详解
JSP Spring配置文件中传值的实例详解 通过spring提供方法,在配置文件中取传值 调用get方法 targetObject :指定调用的对象 propertyPath:指定调用那个getter方法 例1: public class Test1 { private String name = "nihao"; public String getName() { return name; } } Xml代码 <bean id="t1" cl
-
运用JSP+ajax实现分类查询功能的实例代码
本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码,分享给大家供大家参考,具体如下: 这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享. 题目要求:提供企业招聘信息(本年度或历年)查询功能: 首先建立一个jsp文件用来显示数据库信息,并在上面加输入条件的文本框和查询按钮,在这个jsp文件中需要完成一个js函数在用于完成查询功能. <%@ page language="java" pageEncoding="UTF-8&
-
详解SpringBoot集成jsp（附源码）+遇到的坑
本文介绍了SpringBoot集成jsp(附源码)+遇到的坑 ,分享给大家 1.大体步骤 (1)创建Maven web project: (2)在pom.xml文件添加依赖: (3)配置application.properties支持jsp (4)编写测试Controller (5)编写JSP页面 (6)编写启动类App.java 2.新建SpringInitialzr 3.pom文件 <dependencies> <dependency> <groupId>org.s
-
JSP开发之Spring方法注入之替换方法实现
JSP开发之Spring方法注入之替换方法实现 Spring提供了一种替换方法实现的机制,可以让我们改变某个bean某方法的实现.打个比方我们有一个bean,其中拥有一个add()方法可以用来计算两个整数的和,但这个时候我们想把它的实现逻辑改为如果两个整数的值相同则把它们相乘,否则还是把它们相加,在不改变或者是不能改变源码的情况下我们就可以通过Spring提供的替换方法实现机制来实现这一要求. 替换方法实现机制的核心是MethodReplacer接口,其中定义了一个reimplement ()方
-
jsp页面数据分页模仿百度分页效果(实例讲解)
废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%
-
springMVC如何将controller中Model数据传递到jsp页面
在action中存放数据,代码如下: @Controller // 加入到IOC容器 //@RequestMapping(value="/topic") public class TopicAction { @Resource(name = "topicServiceImpl") private TopicService topicService; /** * 首页显示 */ @RequestMapping(value="/index") pub
-
ResourceBundle类在jsp中的国际化实现方法
今天第一次听说页面国际化这个词,所以查资料,顺便做了一个小页面,做做记录. 首先是两个资源文件,分别为msg_en_US.properties和msg_zh_CN.properties 显然中文字符是需要转换过来的. 这是jsp页面的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@page i
-
JSP Spring防止用户重复登录的实现方法
JSP Spring防止用户重复登录的实现方法 Spring security防用户重复登录 使用spring security如何防止用户的重复登录呢?如果用户账号已登录,这时再进行第二次或多次登录,需要阻止这样的多次登录. 一.在web.xml中配置listener <listener> <listener-class>org.springframework.security.web.session.HttpSessionEventPublisher</listener-
-
jsp实现上一页下一页翻页功能(示例代码)
前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需要设置一个pageIndex即可,然后每次加载页面时通过pageIndex去加载数据就行. 那么我们可以设置一个隐藏的input框,用于传递pageIndex给下个页面. 当我们点击上一页的时候,通过js方法改变pageIndex的值,再提交表单即可 二话不多说,看代码,代码里面写的还算比较清楚.
-
php中文本数据翻页（留言本翻页）
在mysq中介绍翻页的文章不少,而文本数据表格式的翻页介绍的很少,这里我就简单的说一下翻页 主要介绍以下翻页思想1.留言本的翻页2.文本论坛的翻页 ------------------------留言本的翻页:------------------------------这个在文本数据表中的翻页是最简单的翻页,这样说明一下 golbal file Data.dat --- NOTE FILE USE user.dat --- Forum File useDat
-
vue如何基于el-table实现多页多选及翻页回显过程
目录 1.问题交代: 2.实现的步骤 2.1 设置table标签 2.2 定义记录选择的数组 2.3 定义手动单选 和手动全选的函数/方法 2.4 写控制回显部分代码 总结 近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题. 1.问题交代: 在pc版的列表页面中,假设当前在列表的第一页,想要在当前页面选择几行数据,跳转到其他页面选择几行数据,选择后的数据页面展示为已勾选状态,经过跳转页面之后,数据选择状态依然存在,且可以将已选择的数据的id传到后端:即标题所述的实现
-
vue loadmore组件上拉加载更多功能示例代码
最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d
-
Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>可输入的下拉框</TITLE> </HEAD> <BODY > <S
-
pyqt5 实现 下拉菜单 + 打开文件的示例代码
如下所示: # -*- coding: utf-8 -*- import sys import os from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtCore import QRect, QSize, QMetaObject, QCoreApplication,\ QPropertyAnimation from PyQt5.QtGui import
-
Angular实现下拉框模糊查询功能示例
本文实例讲述了Angular实现下拉框模糊查询功能.分享给大家供大家参考,具体如下: 前两天研究了一下angularjs,不得不说angularjs的mvc思想还是很强大的.对应偏重于数据处理的项目还是非常有优势的. 写了个搜索下拉框的demo,注释在里边都写了,就不再这罗嗦了. 1. 普通方式实现 <!DOCTYPE html> <html> <head lang="zh_CN"> <meta charset="utf-8"
-
Java实现的模糊匹配某文件夹下的文件并删除功能示例
本文实例讲述了Java实现的模糊匹配某文件夹下的文件并删除功能.分享给大家供大家参考,具体如下: package com.wyebd.gis; import java.io.File; /** * @Title: DelFiles.java * @Package com.wyebd.gis * @Description: * @author lisr * @date Mar 7, 2012 5:36:03 PM * @version V1.0 */ public class DelFiles {
-
ajax实现文件异步上传并回显文件相关信息功能示例
本文实例讲述了ajax实现文件异步上传并回显文件相关信息功能.分享给大家供大家参考,具体如下: 上传文件的信息 <div class="form-group"> <div class="col-sm-4"> <label class="control-label">应用文件</label> </div> <div class="col-sm-8"> <
-
基于node下的http小爬虫的示例代码
每时每刻不管你睡了还是没睡,互联网都会有海量的数据来来往往,有客服端到服务端,有服务端到服务端.http的get和request完成的角色即为数据的获取及提交,接下来我们动手写一个简单的小爬虫来爬爬菜鸟教程中关于node的章节的课程界面. 爬取Node.js 教程首页的所有数据 建立node-http.js,其中代码如下,代码中有详细的的注释,自行理解了哈 var http=require('http');//获取http模块 var url='http://www.runoob.com/nod