jsp实现上一页下一页翻页功能(示例代码)_网络技术

jsp实现上一页下一页翻页功能(示例代码)

发布时间 - 2026-01-11 02:19:40 点击率：次

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

这段时间做了个小项目，包含了翻页和富文本编辑器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" rel="external nofollow" >
  <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
</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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" >首页</a></li>
        <li><a href="add.jsp" rel="external nofollow" >新增</a></li>
        <li><a href="change.jsp" rel="external nofollow" >修改</a></li>
          <li><a href="delete.jsp" rel="external nofollow" >删除</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.jpg" 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() %>" rel="external nofollow"  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);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一页</a>&nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" 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实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# jsp上一页 # 下一页 # JavaScript中transform实现数字翻页效果 # JavaScript实现翻页功能(附效果图) # 基于Vuejs框架实现翻页组件 # 移动端翻页插件dropload.js（支持Zepto和jQuery） # Js实现网页键盘控制翻页的方法 # js实现翻页后保持checkbox选中状态的实现方法 # 一个JS翻页效果 # javascript移动端电子书翻页效果实现代码 # 上一页 # 翻页 # 加载 # 给大家 # 记录集 # 条数 # 这段 # 每页 # 我们可以 # 就行 # 博客 # 希望能 # 要做 # 请输入 # 自定义 # 还算 # 只需要 # 当我们 # 这篇

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何解读nginx日志中的User-Agent

下一篇：如何使用Golang优化容器资源使用_CPU和内存合理分配

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何解读nginx日志中的User-Agent

下一篇：如何使用Golang优化容器资源使用_CPU和内存合理分配