下面小編就為大家帶來一篇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實作上一頁下一頁翻頁功能(範例程式碼)就是小編分享給大家的全部內容了,希望能給大家一個參考! !
相關推薦:
以上是jsp實作上一頁下一頁翻頁功能(範例程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!