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. idea没有tomcatserver问题解决

    https://www.cnblogs.com/a8457013/p/7795987.html 在配置tomcate时有时候按照网上说的找不到tomcat Server,不知不觉花了很长时间这时我们在 ...

  2. hdu 2686最小费用最大流问题

    #include<stdio.h> #include<queue> #include<string.h> using namespace std; #define ...

  3. Maven 手动添加本地jar包

    mvn install:install-file -Dfile=jar绝对路径 -DgroupId=项目组织唯一的标识符 -DartifactId=项目的唯一的标识符 -Dversion=jar版本 ...

  4. openstack ocata 的cell 和 placement api

    The Ocata openstack just released recently. The official docs is not very stable yet. Some key steps ...

  5. http 连接失败重连机制

    1.我们做web开发时,需要经常使用httpclient来请求http服务,有时为了安全起见,服务提供方会提供多个http地址,这样如果我们请求某个ip出现异常,可以重试其他的ip地址,来尽量保证系统 ...

  6. [正在学习开发板]分享--- iTOP-4412移植CAN

    首先拷贝迅为提供的 libcanjni.tar.gz 压缩包到 android 源代码的"iTop4412_ICS/device/samsung/common"文件夹以下,然后使用 ...

  7. 多硬盘分区管理fdisk

    原文:http://blog.fens.me/linux-fdisk/ ---------------------------------------------------------------- ...

  8. Working with Validators and Messages in AngularJS

    原文:http://odetocode.com/blogs/scott/archive/2014/10/16/working-with-validators-and-messages-in-angul ...

  9. CentOS里route命令详解

    Route 功能简述:linux系统中的route命令能够用于IP路由表的显示和操作.它的主要作用是创建一个静态路由让指定一个主机或者一个网络通过一个网络接口,如eth0.当使用"add&q ...

  10. 9.Laravel5学习笔记：在laravel中注冊自己的服务到容器中

    问题描写叙述 或许标题写的不够清楚.实际情况是,在我使用laravel的过程中.须要将自己的一个类,通过服务提供者注冊到IOC容器中,可是在实际操作过程中.出现了下面错误: Unresolvable ...