jsp实现上一页下一页翻页功能
生活随笔
收集整理的這篇文章主要介紹了
jsp实现上一页下一页翻页功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前段時間一直忙于期末考試和找實習，好久沒寫博客了。
這段時間做了個小項目，包含了翻頁和富文本編輯器Ueditor的兩個知識點,Ueditor玩的還不是很深，打算玩深后再寫篇博客。
要實現(xiàn)翻頁功能，只需要設置一個pageIndex即可，然后每次加載頁面時通過pageIndex去加載數(shù)據(jù)就行。
那么我們可以設置一個隱藏的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"><link rel="stylesheet" href="css/index.css"> </head> <body> <%int allRecord=0;//總的記錄條數(shù),不包含查詢后的int totalRecord=0;//總的記錄條數(shù),包含查詢后的int totalPage=1;//總的頁面數(shù)，包含查詢后的int pageIndex=1;//當前頁面號，用于控制頁面翻轉，默認為1List<Record> records=null;DBBean db=new DBBean();allRecord=db.getRecordCount();totalRecord=db.getRecordCount();totalPage=(totalRecord-1)/10 1;if(request.getParameter("pageIndex")!=null){//不是第一次加載//要做下數(shù)據(jù)類型轉換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" 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">首頁</a></li><li><a href="add.jsp">新增</a></li><li><a href="change.jsp">修改</a></li><li><a href="delete.jsp">刪除</a></li></ul><div id="Stats">記錄-<%=allRecord %></div><!--end: Stats 狀態(tài)--></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.png" 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() %>" 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);" class="turnPage" onclick="turnTopPage()">上一頁</a> <a href="javascript:void(0);" 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
翻頁后：pageIndex=2
?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的jsp实现上一页下一页翻页功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTTP协议笔记
- 下一篇： React事件绑定几种方法测试