前段時(shí)間一直忙于期末考試和找實(shí)習(xí)，好久沒寫博客了。
這段時(shí)間做了個小項(xiàng)目，包含了翻頁和富文本編輯器Ueditor的兩個知識點(diǎn),Ueditor玩的還不是很深，打算玩深后再寫篇博客。
要實(shí)現(xiàn)翻頁功能，只需要設(shè)置一個pageIndex即可，然后每次加載頁面時(shí)通過pageIndex去加載數(shù)據(jù)就行。
那么我們可以設(shè)置一個隱藏的input框，用于傳遞pageIndex給下個頁面。
當(dāng)我們點(diǎn)擊上一頁的時(shí)候，通過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;//總的記錄條數(shù),不包含查詢后的 int totalRecord=0;//總的記錄條數(shù),包含查詢后的 int totalPage=1;//總的頁面數(shù)，包含查詢后的 int pageIndex=1;//當(dāng)前頁面號，用于控制頁面翻轉(zhuǎn)，默認(rèn)為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){//不是第一次加載 //要做下數(shù)據(jù)類型轉(zhuǎn)換 pageIndex=Integer.valueOf(request.getParameter("pageIndex")); if(request.getParameter("keyword")!=null){ String keyword=request.getParameter("keyword"); records=db.getRecords(pageIndex,keyword);//獲取查詢內(nèi)容一頁的事件記錄集,共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 狀態(tài)--> </div><!-- end: navigator 導(dǎo)航欄 --> </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%">標(biāo)題</th> <th width="30%">時(shí)間</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條 當(dāng)前第<%= 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 內(nèi)容 --> </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
以上這篇jsp實(shí)現(xiàn)上一頁下一頁翻頁功能(示例代碼)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
