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. robotframework使用requestsLibrary进行接口测试

    一.定义 接口测试:接口测试通常是系统之间交互的接口,或者某个系统对外提供的一些接口服务 分类:RESTful.webservice接口 二.安装 进入C:\Pyhon27\scripts 先要安装r ...

  2. 【CSS】position relative 用法

    Relative是position的一个属性,是相对定位. position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:stat ...

  3. percona-toolkit工具安装

    1.yum安装 yum install perl-TermReadKey.x86_64 yum install perl-IO-Socket-SSL yum install perl-DBI.x86_ ...

  4. 机器学习基础-Logistic回归1

    利用Logistic回归进行分类的主要思想是:根据现有数据对分类边界线建立回归公式,以此进行分类. 训练分类器时的做法就是寻找最佳拟合参数,使用的时最优化算法. 优点:计算代价不高,利于理解和实现. ...

  5. python基础知识--条件判断和循环

    一.输入输出 python怎么来接收用户输入呢,使用input函数,python2中使用raw_input,接收的是一个字符串,输出呢,第一个程序已经写的使用print,代码入下: 1 name=in ...

  6. java Web项目Service层通用接口和entityVo对象与entity对象转化问题的解决方案

    Service层的接口中有一些比较常用方法,一次又一次的在新的Service层中被书写,所以懒惰的程序员又烦了,他们决定写个通用接口来解决这个问题. 有些项目中,实体类即承担接收表单数据的任务,又承担 ...

  7. [codevs] 1699 开关灯

    题目描述 Description YYX家门前的街上有N(2<=N<=100000)盏路灯,在晚上六点之前,这些路灯全是关着的,六点之后,会有M(2<=m<=100000)个人 ...

  8. 【ZJOI2017 Round1练习】D2T2 iqtest（排列组合）

    题意: 思路: 根据欧拉定理,a^(phi(n)-1)为a mod n的逆元 ..]of longint; s,ans,x,mo,k,phi,tmp:int64; i,m,n,j:longint; f ...

  9. Codeforces Round #297 (Div. 2) [ 折半 + 三进制状压 + map ]

    传送门 E. Anya and Cubes time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  10. PAT (Advanced Level) 1037. Magic Coupon (25)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...