首页 > 编程 > JSP > 正文

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

2024-09-05 00:23:11
字体:
来源:转载
供稿:网友

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

这段时间做了个小项目,包含了翻页和富文本编辑器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 %>条记录               共<%= totalPage %>页               每页10条               当前第<%= pageIndex %>页               <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一页</a>               <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnBottomPage()">下一页</a>             </td>        </tr>        </table>    </div><!-- end: content 内容 -->  </div><!-- end: main 主要部分 -->  <div id="footer">       Copyright ©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

jsp,上一页,下一页

翻页后:pageIndex=2

jsp,上一页,下一页

以上这篇jsp实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JSP教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表