jsp實現上一頁的分頁功能
- 巴扎黑原創
- 2017-07-19 15:19:062248瀏覽
前段時間一直忙於期末考和找實習，好久沒寫部落格了。
這段時間做了個小項目，包含了翻頁和富文本編輯器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?1.1.11"><link rel="stylesheet" href="css/index.css?1.1.11"></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);//便于后面使用%><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 状态--></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
#
以上是jsp實現上一頁的分頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Web前端的開發規格總結下一篇：Web前端的開發規格總結