JSP翻页代码(高分)

发布网友发布时间：2022-04-23 09:22

我来回答

共4个回答

懂视网时间：2022-04-23 13:43

下面小编就为大家带来一篇jsp实现上一页下一页翻页功能(示例代码)。小编觉得挺不错的，现在就分享JSP源码给大家，也给大家做个参考。对JSP感兴趣的一起跟随小编过来看看吧

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

这段时间做了个小项目，包含了翻页和富文本编辑器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);//便于后面使用
%>
 <p id="home">
 <p id="header">
 <p id="WebTitle">
 <p class="maintitle"><a href="index.jsp" rel="external nofollow" rel="external nofollow" target="_blank">NoteBook of Eric Wu</a></p>
 <p class="subtitle">The palest ink is better than the best memory !</p>
 </p>

 <p 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>
 <p id="Stats">
 记录-<%=allRecord %>
 </p><!--end: Stats 状态-->
 </p><!-- end: navigator 导航栏 -->
 </p><!-- end: header 头部 -->
 
 <p id="main">
 <p id="content">
 <form id="searchForm" name="searchForm" action="index.jsp" method="get">
  <input type="hidden" name="pageIndex" id="pageIndex" value="1">
 <p id="search">
  <p class="center"></p>
  <input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录">
  <img src="img/search.jpg" onclick="searchKeyword();" class="button">
 </p>
 </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>
 </p><!-- end: content 内容 -->
 </p><!-- end: main 主要部分 -->

 <p id="footer"> 
 Copyright ?2017 汕大-吴广林
 </p><!-- end: footer底部-->
 </p><!-- 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实现上一页下一页翻页功能(示例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考！！

热心网友时间：2022-04-23 10:51

int intPageSize; //一页显示的记录数
int intRowCount; //记录总数
int intPageCount; //总页数
int intPage; //待显示页码
String strPage;

//设置一页显示的记录数
intPageSize = 25;

//取得待显示页码
strPage = request.getParameter("page");
if(strPage==null){//表明在QueryString中没有page这一个参数，此时显示第一页数据
intPage = 1;
}else{//将字符串转换成整型
intPage = java.lang.Integer.parseInt(strPage);
if(intPage< 1){
intPage = 1;
}
}
Rs=connJB.executeQuery(sql);
Rs.absolute(1);

//获取记录总数
Rs.last();
intRowCount = Rs.getRow();

//记算总页数
intPageCount = (intRowCount+intPageSize-1) / intPageSize;

//调整待显示的页码
if(intPage >intPageCount) intPage = intPageCount;
if(intPageCount >0){
//将记录指针定位到待显示页的第一条记录上
Rs.absolute((intPage-1) * intPageSize+1);
//显示数据
i = 0;
while(i< intPageSize && !Rs.isAfterLast()){
if(!className.equals("行业分类")){
//id=Rs.getInt("INFORMATION_ID");
strId=Rs.getString("INFORMATION_ID");
subjectName=Rs.getString("INFORMATION_NAME");
informationRank=Rs.getString("INFORMATION_RANK");

%>
<tr>
<td width="4%" height="25" valign="middle"><div align="center">◇</div></td>
<td width="96%"><a href="index2.jsp?INFORMATION_ID=<%=strId%>&INFORMATION_RANK=<%=informationRank%>" class="t8"><%=subjectName%></a></td>
</tr>
<% }else{
strId=Rs.getString("SUB_CLASS_VALUE");
subjectName=Rs.getString("SUB_CLASS_VALUE");
%>
<tr>
<td width="4%" height="25" valign="middle"><div align="center">◇</div></td>
<td width="96%"><a href="index_way.jsp?SMALL_CLASS=<%=strId%>" class="t8"><%=subjectName%></a></td>
</tr>
<%}%>

<%
Rs.next();
i++;

}Rs.close();
i=0;
%>
</table>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td valign="top" bgcolor="#F2F2F2">
<div align="left">

</div></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#8C8C8C">
<tr>
<td height="22" align="center" bgcolor="#FFFFFF">第<%=intPage%>页共<%//=intRowCount%>条记录/共<%=intPageCount%>页
<%
if(intPage<2){
out.print("首页 | 上一页");
}else{%>
<a href="index.jsp?CLASS_NAME=<%=className%>&SUBJECT_NAME=<%=titleName%>">首页 </a> | <a href="index.jsp?page=<%=intPage-1%>&CLASS_NAME=<%=className%>&SUBJECT_NAME=<%=titleName%>">上一页</a>
<%}%>
|
<%
if((intPageCount-intPage)<1)
{
out.print("下一页 | 尾页");
}else{%>
<a href="index.jsp?page=<%=intPage+1%>&CLASS_NAME=<%=className%>&SUBJECT_NAME=<%=titleName%>">下一页</a> | <a href="index.jsp?page=<%=intPageCount%>&CLASS_NAME=<%=className%>&SUBJECT_NAME=<%=titleName%>">尾页</a>
<%}
}
else{
out.print("<center><table width=776 border=0 align=center cellpadding=0 cellspacing=1 bgcolor=#000000><tr><td bgcolor=#FFFFFF><center>目前还没有内容！</center></td></tr></table></centre>");
}%>

其中sql为具体的SQL语句,这个东东很简单,自己多写几次就搞的懂了,我发的是最简单的模式实现,封装为其它工厂实现方式的没发.

热心网友时间：2022-04-23 12:09

热心网友时间：2022-04-23 13:44

用DREAMWEAVER 2004 直接可以生成。