微信扫一扫打赏支持

jsp实现翻页功能

jsp实现翻页功能

要实现翻页功能，只需要设置一个pageIndex即可，然后每次加载页面时通过pageIndex去加载数据就行。

那么我们可以设置一个隐藏的input框，用于传递pageIndex给下个页面。

当我们点击上一页的时候，通过js方法改变pageIndex的值，再提交表单即可

二话不多说，看代码，代码里面写的还算比较清楚。

这个是index.jsp的代码。

index.jsp

  1 <%@page import="Bean.DBBean"%>
  2 <%@page import="Entity.Record"%>
  3 <%@page import="java.util.List"%>
  4 <%@ page language="java" contentType="text/html; charset=UTF-8"
  5     pageEncoding="UTF-8"%>
  6 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7 <html>
  8 <head>
  9 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 10 <title>NoteBook of Eric Wu</title>
 11     <link rel="stylesheet" href="css/basic.css">
 12     <link rel="stylesheet" href="css/index.css">
 13 </head>
 14 <body>
 15 <%
 16     int allRecord=0;//总的记录条数,不包含查询后的
 17     int totalRecord=0;//总的记录条数,包含查询后的
 18     int totalPage=1;//总的页面数，包含查询后的
 19     int pageIndex=1;//当前页面号，用于控制页面翻转，默认为1
 20     List<Record> records=null;
 21     DBBean db=new DBBean();
 22     allRecord=db.getRecordCount();
 23     totalRecord=db.getRecordCount();
 24     totalPage=(totalRecord-1)/10+1;
 25     if(request.getParameter("pageIndex")!=null){//不是第一次加载
 26         //要做下数据类型转换
 27         pageIndex=Integer.valueOf(request.getParameter("pageIndex"));
 28         if(request.getParameter("keyword")!=null){
 29             String keyword=request.getParameter("keyword");
 30             records=db.getRecords(pageIndex,keyword);//获取查询内容一页的事件记录集,共10条
 31             totalRecord=db.getRecordCount(keyword);
 32             totalPage=(totalRecord-1)/10+1;
 33         }else{
 34             records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
 35         }
 36     }else{//第一次加载
 37         records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
 38     }
 39     session.setAttribute("records", records);//便于后面使用
 40 %>
 41     <div id="home">
 42     <div id="header">
 43         <div id="WebTitle">
 44             <div class="maintitle"><a href="index.jsp" target="_blank">NoteBook of Eric Wu</a></div>
 45             <div class="subtitle">The palest ink is better than the best memory !</div>
 46         </div>
 47 
 48         <div id="navigator">
 49             <ul id="navList">
 50                 <li><a href="index.jsp">首页</a></li>
 51                 <li><a href="add.jsp">新增</a></li>
 52                 <li><a href="change.jsp">修改</a></li>
 53                    <li><a href="delete.jsp">删除</a></li>
 54             </ul>
 55             <div id="Stats">
 56                 记录-<%=allRecord %>
 57             </div><!--end: Stats 状态-->
 58         </div><!-- end: navigator 导航栏 -->
 59     </div><!-- end: header 头部 -->
 60     
 61     <div id="main">
 62            <div id="content">
 63                <form id="searchForm" name="searchForm" action="index.jsp"  method="get">
 64                    <input type="hidden" name="pageIndex" id="pageIndex"  value="1">
 65                 <div id="search">
 66                     <div class="center"></div>
 67                     <input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录">
 68                     <img src="img/search.png" onclick="searchKeyword();" class="button">
 69                 </div>
 70             </form>
 71                <table>
 72                 <tr>
 73                     <th width="10%">序号</th>
 74                     <th width="60%">标题</th>
 75                     <th width="30%">时间</th>
 76                 </tr>
 77                 <%
 78                     int count=0;
 79                     if(records!=null){
 80                         for(Record r: records){
 81                             count++;
 82                 %>
 83                 <tr>
 84                     <td class="center"><%= count %></td>
 85                     <td><a href="content.jsp?recordId=<%= r.getId() %>"  target="_blank"><%= r.getTitle() %></a></td>
 86                     <td class="center"><%= r.getTime() %></td>
 87                 </tr>
 88                 <%    
 89                         }
 90                     }
 91                 %>
 92                  <tr class="alt" >
 93                     <td class="center" colspan="3">
 94                         共<%= totalRecord %>条记录&nbsp;&nbsp;&nbsp;
 95                         共<%= totalPage %>页&nbsp;&nbsp;&nbsp;
 96                         每页10条&nbsp;&nbsp;&nbsp;
 97                         当前第<%= pageIndex %>页&nbsp;&nbsp;&nbsp;
 98                         <a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一页</a>&nbsp;&nbsp;&nbsp;
 99                         <a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一页</a>&nbsp;&nbsp;&nbsp;
100                     </td>
101                 </tr>
102                </table>
103         </div><!-- end: content 内容 -->
104     </div><!-- end: main 主要部分 -->
105 
106     <div id="footer">     
107         Copyright &copy;2017 汕大-吴广林
108     </div><!-- end: footer底部-->
109     </div><!-- end: home 自定义的最大容器 -->
110 </body>
111 
112 <script type="text/javascript">
113     var pageIndex=<%=pageIndex %>;
114     var totalPage=<%=totalPage %>;
115     console.log(pageIndex);
116     //上一页
117     function turnTopPage(){
118         if(pageIndex==1){
119             return;
120         }else{
121             document.getElementById("pageIndex").value=pageIndex-1;
122             document.getElementById("searchForm").submit();
123         }
124     }
125     //下一页
126     function turnBottomPage(){
127         if(pageIndex>=totalPage){    
128             return;
129            }else{
130            document.getElementById("pageIndex").value=pageIndex+1;
131            document.getElementById("searchForm").submit();
132            }
133     }
134     function searchKeyword(){
135         document.getElementById("pageIndex").value=1;
136         document.getElementById("searchForm").submit();
137     }
138 </script>
139 </html>

 

 

效果图

翻页后：pageIndex=1

翻页后：pageIndex=2

 

参考：

jsp实现上一页下一页翻页功能 - 汕大小吴 - 博客园
https://www.cnblogs.com/wuguanglin/p/fanye.html

 

posted @ 2017-12-15 01:35  范仁义  阅读(4165)  评论(0)  编辑  收藏  举报