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. python和搜索

    # -*- coding: UTF-8 -*- import re # 搜索逻辑 def querylogic(list): query = {} if len(list) > 1 or len ...

  2. git学习（一）----基础知识

    git是世界上最好用最先进的版本管理系统,那么什么是版本管理系统呢,百度上是这样说的: 举个例子,当你写毕业论文的时候,灵感爆发了修改或者删除了一些内容,但是你还想保留之前的版本,就需要另存为不同的w ...

  3. POJ 1635 树的最小表示法

    题目大意: 用一堆01字符串表示在树上走动的路径,0表示往前走,1表示往回走,问两种路径方式下形成的树是不是相同的树 我们可以利用递归的方法用hash字符串表示每一棵子树,然后将所有子树按照字典序排序 ...

  4. hdu 2845

    #include<stdio.h> #define N 200100 int f[N]; int  a[N],n; int main() { int m,j,i,suma,sumb,sum ...

  5. 贪婪大陆（cogs 1008）

    [题目描述] 面对蚂蚁们的疯狂进攻,小FF的Tower defense宣告失败……人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海,前方是变异了的超级蚂蚁. ...

  6. 洛谷P3094 [USACO13DEC]假期计划Vacation Planning

    题目描述 有N(1 <= N <= 200)个农场,用1..N编号.航空公司计划在农场间建立航线.对于任意一条航线,选择农场1..K中的农场作为枢纽(1 <= K <= 100 ...

  7. hihoCoder #1055 : 刷油漆 [ 树形dp ]

    传送门 结果:Accepted     提交时间:2015-05-11 10:36:08 #1055 : 刷油漆 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到 ...

  8. httpclient自动执行http的302重定向

    今天debug过程中发现,httpclient会自动执行302的重定向,但是这个的前提是第一个请求是get发出的.我测试发现用post的后的302是系统不会自动redirect的..不知道到底正确不, ...

  9. BZOJ 3884 拓展欧拉定理

    3884: 上帝与集合的正确用法 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 4142  Solved: 1907[Submit][Status][D ...

  10. B. Restaurant--cf579B (贪心)

    http://codeforces.com/problemset/problem/597/B 把右节点从小到大排序  在跑一遍就行了 #include <iostream> #includ ...