前段時(shí)間一直忙于期末考試和找實(shí)習(xí)，好久沒寫博客了。
這段時(shí)間做了個(gè)小項(xiàng)目，包含了翻頁和富文本編輯器Ueditor的兩個(gè)知識點(diǎn),Ueditor玩的還不是很深，打算玩深后再寫篇博客。
要實(shí)現(xiàn)翻頁功能，只需要設(shè)置一個(gè)pageIndex即可，然后每次加載頁面時(shí)通過pageIndex去加載數(shù)據(jù)就行。
那么我們可以設(shè)置一個(gè)隱藏的input框，用于傳遞pageIndex給下個(gè)頁面。
當(dāng)我們點(diǎn)擊上一頁的時(shí)候，通過js方法改變pageIndex的值，再提交表單即可
二話不多說，看代碼，代碼里面寫的還算比較清楚。
這個(gè)是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
ListRecord> 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 %>條記錄nbsp;nbsp;nbsp;
共%= totalPage %>頁nbsp;nbsp;nbsp;
每頁10條nbsp;nbsp;nbsp;
當(dāng)前第%= pageIndex %>頁nbsp;nbsp;nbsp;
a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnTopPage()">上一頁/a>nbsp;nbsp;nbsp;
a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" class="turnPage" onclick="turnBottomPage()">下一頁/a>nbsp;nbsp;nbsp;
/td>
/tr>
/table>
/div>!-- end: content 內(nèi)容 -->
/div>!-- end: main 主要部分 -->
div id="footer">
Copyright copy;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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- JavaScript中transform實(shí)現(xiàn)數(shù)字翻頁效果
- JavaScript實(shí)現(xiàn)翻頁功能(附效果圖)
- 基于Vuejs框架實(shí)現(xiàn)翻頁組件
- 移動(dòng)端翻頁插件dropload.js（支持Zepto和jQuery）
- Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法
- js實(shí)現(xiàn)翻頁后保持checkbox選中狀態(tài)的實(shí)現(xiàn)方法
- 一個(gè)JS翻頁效果
- javascript移動(dòng)端 電子書 翻頁效果實(shí)現(xiàn)代碼
