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. Go内建变量类型

    package main import ( "math/cmplx" "fmt" "math" ) //内建变量类型: // bool , ...

  2. Go 在游戏行业中的工程实践

    在今年 1 月由七牛云主办的 ECUG Con 十周年盛会上,真有趣技术总监陈明达带来了题为< Go 在游戏行业中的工程实践>的精彩分享,深入讲解了 Go 的工程经验,错误和异常处理,in ...

  3. codeforces 303 div2 E

    赤裸裸的最短路,需要注意下枚举过程就好了.直接贴上别人的代码,发现他的代码挺符合我的风格,以后就这样写了. #include <bits/stdc++.h> ]; ]; ]; ]; vec ...

  4. C++动态特性和C++对象模型——《高质量程序设计12章》

    1.动态特性 静态特性和动态特性,编译时和运行时 虚函数 (1)虚函数的叫覆盖,虚函数不是实现多态的唯一手段(其他语言也可能采用别的方法). 抽象基类: (1)如果将基类的虚函数声明为纯虚函数,则基类 ...

  5. msp430项目编程22

    msp430中项目---充电控制系统 1.定时器工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习

  6. Flex4分模块下样式动态加载步骤及相关问题的解决

    1.  给应用程序编写CSS文件 (1)在项目下创建CSS文件(任意路径,可以多个).本例在src下创建了5个样式文件 (2)Flex支持的CSS文件定义如下: a)  type selector(类 ...

  7. python学习之-- Mysql 基础知识

    数据库介绍及MYSQL基础操作了解 关系型数据库(RDBMS)是按照数据结构来组织,存储和管理数据的仓库.特点:1:数据以表格的形式出现2:每行为各种记录名称3:每列为记录名称所对应的数据域4:许多的 ...

  8. C. Day at the Beach---cf559

    http://codeforces.com/problemset/problem/599/C 题目大意: 有n个城堡的高度   让你最多分成几个块   每个块排过序之后 整体是按照升序来的 分析:   ...

  9. jQuery的一些总结(持续更新中...)

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6693399.html 1. $.expr[':']  过滤 ...

  10. maven的超级pom

    对于 Maven3,超级 POM 在文件 %MAVEN_HOME%/lib/maven-model-builder-x.x.x.jar 中的 org/apache/maven/model/pom-4. ...