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

这段时间做了个小项目，包含了翻页和富文本编辑器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实现上一页下一页翻页功能的更多相关文章

Web Scraper 翻页——利用 Link 选择器翻页 | 简易数据分析 14
这是简易数据分析系列的第 14 篇文章. 今天我们还来聊聊 Web Scraper 翻页的技巧. 这次的更新是受一位读者启发的,他当时想用 Web scraper 爬取一个分页器分页的网页,却发现我之 ...
简易数据分析 12 | Web Scraper 翻页——抓取分页器翻页的网页
这是简易数据分析系列的第 12 篇文章. 前面几篇文章我们介绍了 Web Scraper 应对各种翻页的解决方法,比如说修改网页链接加载数据.点击"更多按钮"加载数据和下拉自动加载 ...
thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享
前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...
使用Python在自己博客上进行自动翻页
先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...
Atitit.列表页面and条件查询的实现最佳实践(2)------翻页分页控件的实现java .net php
)------翻页分页控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...
Android 滑动效果高级篇（七）—— 华丽翻页效果
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...
Android水平(横向)翻页列表,类似水平GridVIew
Android水平(横向)翻页列表,类似于水平方向的GridView,行列自定义,但要翻页切换,考虑加载性能,当Item数据很多时加载和翻页要流畅,翻页时要有动画效果,效果图如下: 实现方式: 1:翻 ...
Android电子书翻页效果实现
这篇文章是在参考了别人的博客基础上,修改了其中一个翻页bug,并且加了详细注释先看效果其中使用了贝赛尔曲线原理,关于贝赛尔曲线的知识,推荐大家看下http://blog.csdn.net/hmg2 ...
selenium 之百度搜索，结果列表翻页查询
selenium之百度搜索,结果列表翻页查询 by:授客 QQ:1033553122 实例:百度搜索,结果列表翻页查询解决问题:解决selenium driver获取web页面元素时,元素过期问题 ...
Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本项目版本记录.1 2. Easyui 的翻页组件2 ...

随机推荐

android学习-第一讲
一.基础View控件 View类的常见XML属性,对应发放及说明每个界面控件都需要设置Android:layout_height,Android:layout_width,指定控件的高度和宽度.通常 ...
ORACLE的监听日志太大，客户端无法连接
数据库sqlplus能连接,plsql连接失败,也不报错,就定位到了是不是监听出了什么问题,删除监听,重建监听,重启监听,各种尝试都没解决问题. 却是监听日志太大导致的问题,一下是处理步骤: 查看监听 ...
Python爬虫学习(二) ——————爬取前程无忧招聘信息并写入excel
作为一名Pythoner,相信大家对Python的就业前景或多或少会有一些关注.索性我们就写一个爬虫去获取一些我们需要的信息,今天我们要爬取的是前程无忧!说干就干!进入到前程无忧的官网,输入关键字&q ...
点评阿里JAVA手册之MySQL数据库（建表规约、索引规约、SQL语句、ORM映射）
下载原版阿里JAVA开发手册 [阿里巴巴Java开发手册v1.2.0] 本文主要是对照阿里开发手册,注释自己在工作中运用情况. 本文内容:MySQL数据库 (建表规约.索引规约.SQL语句.ORM映 ...
CSS小技巧-怎样让每行多余的文字显示文省略号？
1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis
#416 Div2 C
#416 Div2 C 题意一些人去坐车,它们已经按给定顺序排队,每个人可能去不同的目的地,去同一目的地的人一定要被分成一组(去不同目的地的也可被分到同一组),对分好的每一组所有不同的目的地序号作异 ...
jquery 根据数据库值设置radio的选中
jsp代码: <label>性别</label> <input type="radio" value="1" name=&quo ...
day_ha配置文件
流程图: 代码 #!/sur/bin/env python # -*- coding: utf-8 -*- #{"backend": "www.oldboy.org&qu ...
踩一踩微信小程序开发的坑---tabBar
最近忙于开发视频直播的项目,小程序学习也放置了两三个星期了,web开发者工具更新到新版,发现上个版本做的demo不显示了
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleExcept问题解决方案
在部署Dynamic Web Project时,如果正确配置web.xml或者标注时,仍然出现以上异常的话,可以尝试以下内容讲解的方法: 首先,双击eclipse中的servers,位置如下图&quo ...

jsp实现上一页下一页翻页功能

index.jsp

效果图

jsp实现上一页下一页翻页功能的更多相关文章

随机推荐

热门专题