前段时间一直忙于期末考试和找实习，好久没写博客了。

这段时间做了个小项目，包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深，打算玩深后再写篇博客。

要实现翻页功能，只需要设置一个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实现上一页下一页翻页功能的更多相关文章

  1. Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14

    这是简易数据分析系列的第 14 篇文章. 今天我们还来聊聊 Web Scraper 翻页的技巧. 这次的更新是受一位读者启发的,他当时想用 Web scraper 爬取一个分页器分页的网页,却发现我之 ...

  2. 简易数据分析 12 | Web Scraper 翻页——抓取分页器翻页的网页

    这是简易数据分析系列的第 12 篇文章. 前面几篇文章我们介绍了 Web Scraper 应对各种翻页的解决方法,比如说修改网页链接加载数据.点击"更多按钮"加载数据和下拉自动加载 ...

  3. thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享

    前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...

  4. 使用Python在自己博客上进行自动翻页

    先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...

  5. Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php

    )------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...

  6. Android 滑动效果高级篇（七）—— 华丽翻页效果

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...

  7. Android水平(横向)翻页列表,类似水平GridVIew

    Android水平(横向)翻页列表,类似于水平方向的GridView,行列自定义,但要翻页切换,考虑加载性能,当Item数据很多时加载和翻页要流畅,翻页时要有动画效果,效果图如下: 实现方式: 1:翻 ...

  8. Android电子书翻页效果实现

    这篇文章是在参考了别人的博客基础上,修改了其中一个翻页bug,并且加了详细注释 先看效果 其中使用了贝赛尔曲线原理,关于贝赛尔曲线的知识,推荐大家看下http://blog.csdn.net/hmg2 ...

  9. selenium 之百度搜索，结果列表翻页查询

    selenium之百度搜索,结果列表翻页查询 by:授客 QQ:1033553122 实例:百度搜索,结果列表翻页查询 解决问题:解决selenium driver获取web页面元素时,元素过期问题 ...

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

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

随机推荐

  1. 软件需求规格说明书（spec）

    1.spec 的目标是什么,spec 的目标不包括什么? 我们的目标是对用户发布的各种需求(需要伙伴的需求)进行处理,使别的用户可以看到信息,并且成功找到合适的伙伴一起! 不包括对用户之间的联系. 2 ...

  2. Fisher Vector Encoding and Gaussian Mixture Model

    一.背景知识 1. Discriminant  Learning Algorithms(判别式方法) and Generative Learning Algorithms(生成式方法) 现在常见的模式 ...

  3. 利用nodeJs来安装less以及编译less文件为css文件

    NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqY ...

  4. C/C++遍历目录下的所有文件（Windows/Linux篇，超详细）

    本文可转载,转载请注明出处:http://www.cnblogs.com/collectionne/p/6815924.html. 前面的一篇文章我们讲了用Windows API遍历一个目录下的所有文 ...

  5. 网络编程2之Socket简介和java.net包

    一.Socket 通信链路的端点就被称为"套接字"(英文名Socket) 是提供给应用程序的接口 图文说明Socket Socket通信原理 二.java.net包 Java.ne ...

  6. 抓包工具 - HttpWatch

    HttpWatch是功能强大的网页数据分析工具,集成在IE工具栏,主要功能有网页摘要.cookies管理.缓存管理.消息头发送/接收,字符查询.POST数据.目录管理功能和报告输出.HttpWatch ...

  7. 关于 vue-cli v2.8.2

    我在撰写<Vue2实践揭秘>时采用的 vue-cli 版本是 v2.5.1,由于实体书的出版周期比电子书的要长,所以到全书出版vue-cli已经更新到 v2.8.2 了,我在书中曾经对 v ...

  8. dedecms后台添加新变量和删除变量的方法

    下面由做网站为大家来介绍dedecms后台添加新变量和删除变量的方法 添加新变量是做什么用的?答:可以在模板内调用的东东. 一.进入网站织梦(Dedecms)后台(以dede5.5为例),依次打开系统 ...

  9. CLR基础与术语

    CLR(Common Language Runtime):一个可由多种编程语言使用的"运行时". CLR的核心功能(内存管理,程序集加载,安全性,异常处理,线程同步等)可由面向CL ...

  10. HTML5 jQuery+FormData 异步上传文件，带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...