jsp实现翻页功能

要实现翻页功能,只需要设置一个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 %>条记录&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

参考:

jsp实现上一页下一页翻页功能 - 汕大小吴 - 博客园
https://www.cnblogs.com/wuguanglin/p/fanye.html

jsp实现翻页功能的更多相关文章

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

    前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...

  2. [Qt] CFlip 翻页功能实现

    由于需要给table制作翻页功能,所以写了一个翻页的类. 看上去总体效果感觉还是不错的,哈哈. //flip.h #ifndef CFLIP_H #define CFLIP_H #include &l ...

  3. Web测试——翻页功能测试用例

    参考:https://wenku.baidu.com/view/e6462707de80d4d8d15a4f1e.html?rec_flag=default&mark_pay_doc=2&am ...

  4. Atitit 翻页功能的解决方案与版本历史 v4 r49

    Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本  项目版本记录.1 2. Easyui 的翻页组件2 ...

  5. Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx

    Atitit.pagging  翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档   paip.js翻页分页pageing组件.txt1 ...

  6. PyQt—QTableWidget实现翻页功能

    主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...

  7. pyspider示例代码五:实现自动翻页功能

    实现自动翻页功能 示例代码一 #!/usr/bin/env python # -*- encoding: utf- -*- # Created on -- :: # Project: v2ex fro ...

  8. jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

    jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...

  9. Webdriver控制翻页控件,并实现向前向后翻页功能,附上代码,仅供参考,其他类似日期控件的功能可以自己封装

    新增输入与选择页面的html源码: <div style="margin-top:-60px;" class="modal-content" id=&qu ...

随机推荐

  1. ajax传递参数给springmvc

    下面看一些传参的例子,基本涵盖了大部分的参数传递类型

  2. 64.JPA命名策略【从零开始学Spring Boot】

    [从零开始学习Spirng Boot-常见异常汇总] 在(39.2). Spring Boot Shiro权限管理[从零开始学Spring Boot] 这一章节中有人碰到这样一个问题"导入的 ...

  3. NYOJ660逃离地球——只为最大存活率~

    逃离地球 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描述 据霍金的<时间简史>所述,在几亿年之后将再次发生宇宙大爆炸.在宇宙大爆炸后,地球上将新生出许多生物而不 ...

  4. C# CreateDataTable

    public DataTable CreateDataTable()         {             DataTable dataTable = new DataTable();      ...

  5. ZOJ 3811 Untrusted Patrol【并查集】

    题目大意:给一个无向图,有些点有装监视器记录第一次到达该点的位置,问是否存在一条路径使得监视器以给定的顺序响起,并且经过所有点 思路:牡丹江网络赛的题,当时想了种并查集的做法,通神写完程序WA了几发, ...

  6. 【最长上升子序列记录路径(n^2)】HDU 1160 FatMouse's Speed

    https://vjudge.net/contest/68966#problem/J [Accepted] #include<iostream> #include<cstdio> ...

  7. 常见的 Android 新手误区

    在过去十年的移动开发平台中,作为资深的移动开发人员,我们认为Android平台是一个新手最广为人知的平台.它不仅是一个廉价的工具,而且有着良好的 开发社区,以及从所周知的编程语言(Java),使得开发 ...

  8. 使现有的VSCode成为便携版(绿色版)

    VSCode可以说是各种代码编辑器前端之中的神器了,相对体积小且扩展性强,我们希望将它携带在U盘中在各种工作环境中使用,官方也提供了在Windows,Linux和MacOS三大平台中使VSCode便携 ...

  9. 2016 Multi-University Training Contest 2 solutions BY zimpha

    Acperience 展开式子, \(\left\| W-\alpha B \right\|^2=\displaystyle\alpha^2\sum_{i=1}^{n}b_i^2-2\alpha\su ...

  10. BMP格式,转载

    BMP文件格式,又称为Bitmap(位图)或是DIB(Device-Independent Device,设备无关位图),是Windows系统中广泛使用的图像文件格式.由于它可以不作任何变换地保存图像 ...