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

这段时间做了个小项目，包含了翻页和富文本编辑器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. 【Netty】codec框架

    一.前言 前面已经学习完了Netty框架中的主要组件,接着学习codec框架. 二.codec框架 每个网络应用程序必须定义如何将在对等体之间传输的原始字节解析并转换为目标程序的数据格式,这种转换逻辑 ...

  2. 通过demo学python

    链接 Github项目地址 软件安装包(pycharm.注册码.解析器等) Python 一切皆对象 Python 编码规范 The Python Standard Library The Pytho ...

  3. Cohort Analysis and LifeCycle Grids mixed segmentation with R（转）

    This is the third post about LifeCycle Grids. You can find the first post about the sense of LifeCyc ...

  4. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  5. 简单VR照片 使用陀螺仪、姿态角（Roll、Pitch、Yaw ）、四元数

        最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度.但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR.VR的朋友一些提示吧.   ...

  6. CSS小技巧-煎蛋的画法~

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

  7. 事件总线（Event Bus）知多少

    源码路径:Github-EventBus 简书同步链接 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布-订阅)模式,你也许就很熟悉.事件总线是对发布-订阅模式的一种实现.它是一种集 ...

  8. 快速排序（Quicksort）的Javascript实现

    日本程序员norahiko,写了一个排序算法的动画演示,非常有趣. 这个周末,我就用它当做教材,好好学习了一下各种排序算法. 排序算法(Sorting algorithm)是计算机科学最古老.最基本的 ...

  9. [Linux] PHP程序员玩转Linux系列-腾讯云硬盘扩容挂载

    1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 3.PHP程序员玩转Linux系列-搭建FTP代码开发环境 4.PHP程序员玩转L ...

  10. iptables 基本用法

    iptables 1.iptables 表 (1)介绍常用表 filtert(过滤器) 链 ↓ INPUT chain:控制进入主机的数据包 OUTPUT chain:控制向外发出的数据包 FORWA ...