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

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

    size_t在C语言中就有了.它是一种“整型”类型,里面保存的是一个整数,就像int, long那样.这种整数用来记录一个大小(size).size_t的全称应该是size type,就是说“一种用来 ...

  2. Linux盘符绑定槽位

    服务器下的硬盘主有机械硬盘.固态硬盘以及raid阵列,通常内核分配盘符的顺序是/dev/sda./dev/sdb- -.在系统启动过程中,内核会按照扫描到硬盘的顺序分配盘符(先分配直通的,再分配阵列) ...

  3. kafka 0.8.2 消息生产者 producer

    package com.hashleaf.kafka; import java.util.Properties; import kafka.javaapi.producer.Producer; imp ...

  4. Elasticsearch索引和文档操作

    列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...

  5. Spring学习（9）--- @Autowired注解(二)

    可以使用@Autowired注解那些众所周知的解析依赖性接口,比如:BeanFactory,ApplicationContext,Environment,ResourceLoader,Applicat ...

  6. vijos1325 桐桐的糖果计划

    Description 桐桐是一个快乐的小朋友,他生活中有许多许多好玩的事,让我们一起来看看吧-- 桐桐很喜欢吃棒棒糖.他家处在一大堆糖果店的附近. 但是,他们家的区域经常出现塞车.塞人等情况,这导致 ...

  7. Python pycrypto 加密与解密

    参考: python 使用 pycrypto‎ 实现 AES 加密解密 参考: 分组对称加密模式:ECB/CBC/CFB/OFB 代码示例 : import hashlib from Crypto.C ...

  8. arcgis api for js入门开发系列九热力图效果

    上一篇实现了demo的聚合效果,本篇新增热力图效果,截图如下: 热力图效果实现的思路如下: 1.map.js初始化函数调用聚合效果的js接口,map.heatmap.js实现聚合核心效果的js文件 / ...

  9. oracle学习笔记(1)-三级模式SCHEMA

    oracle三级模式及二级映像 模式(schema)是数据库的一个名词,大部分的数据库在结构上都有三级模式的特征,了解下基本的概念,有助于后续深入的学习. 用老罗坚果pro发布会的话说就是,不罗嗦,先 ...

  10. （1）认识javascript

    认识javascript 在本篇学习资料中,讲解javascript的基本概念.编写工具.在html中的使用: JavaScript 是脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务 ...