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

这段时间做了个小项目，包含了翻页和富文本编辑器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. PHP科普

    1.PHP是什么意思? 超文本预处理器(Hypertext Preprocessor) 2.PHP是干什么用的? PHP是一种通用开源脚本语言.语法吸收了C语言.Java和Perl(实际抽取与汇报语言 ...

  2. 7.ReadWriteLock接口及其实现ReentrantReadWriteLock

    Java并发包的locks包里的锁基本上已经介绍得差不多了,ReentrantLock重入锁是个关键,在清楚的了解了同步器AQS的运行机制后,实际上再分析这些锁就会显得容易得多,这章节主讲另外一个重要 ...

  3. 【Python3之常用模块】

    一.time 1.三种表达方式 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.命令如下 ...

  4. node.js零基础详细教程(3)：npm包管理、git github的使用

    第三章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...

  5. redis学习（2）--- Redis概述

    一.Redis介绍 高性能键值对数据库,支持的键值对数据类型: 字符串类型 列表类型 有序集合类型 散列类型 集合类型 官方测试读写速度: 测试50个并发程序,执行10万次请求 读的速度:每秒11万次 ...

  6. 快来领取一场专门讲解UTF-8与UTF-16编码算法的GitChat活动的免费名额

    微信扫一扫,可打开该GitChat活动页面 字符编码是计算机世界里最基础.最重要.最令人困惑的一个主题之一.不过,在计算机教材中却往往浮光掠影般地草草带过,甚至连一本专门进行深入介绍的专著都找不到(对 ...

  7. Navicat连接Oracle报错_Cannot load OCI DLL 87

    原因: Oracle需要装client才能让第三方工具通过OCI(Oracle Call Interface)来连接. 解决方案: 1. 去oracle官网下载Instant Client 11, 或 ...

  8. js实现htmlToWordDemo

    之前由于工作需要,需要实现将html内的一部分内容直接转为word和pdf的功能.就研究了一下方法并且实现了两个demo.今天先说一下html to word(才疏学浅,仅供交流,如有错误,请指出). ...

  9. 关于MATLAB处理大数据坐标文件2017526

    运行六个特征,提高了3分,也就是说以前做的特征已经用完了,穷途末路,依靠以前的特征已经很难取得进步了,提出以下建议 1.测试集曾经运行错误的数据尽早画出图形,并尽可能发现问题并提出特征 2.运行其他程 ...

  10. oracle表空间增长异常或表空间占用过高问题分析

    本人对oracle调优还处在不断学习状态,这个问题是之前处理的项目上遇到过的,顺利解决了,分享下此类问题的处理思路,不足之处,还请指正. 项目上反馈说业务表空间增长越来越快,上次新增的30G数据文件, ...