jsp實現資料表的增刪改查以及分頁查詢效果
jsp實現資料表的分頁查詢效果相關截圖:
相關程式碼如下:
studentList.jsp相關程式碼:
<%@page import="cn.utils.Page"%>
<%@page import="cn.pojo.*"%>
<%@page import="java.util.*"%>
<%@page import="cn.services.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();//獲得專案的路徑
String basePath = request.getScheme() + "://" + request.getServerName() + ":"//
+ request.getServerPort() + path + "/";
%>
<!DOCTYPE html >
<html>
<head>
<base href=<%=basePath%>>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>studentList.jsp</title>
<link rel="stylesheet" href="css/studentList.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
<table class="table">
<tr>
<th>序號</th>
<th>學生姓名</th>
<th>學生密碼</th>
<th>學生性別</th>
<th>手機號碼</th>
<th>住址</th>
<!-- <th>生日</th> -->
<!-- <th>身份證號</th> -->
<!-- <th>圖片</th> -->
<th>中心</th>
<th>駕校</th>
<th>班級</th>
<!-- <th>入學時間</th> -->
</tr>
<%
request.setCharacterEncoding("utf-8");
String str = request.getParameter("pageNum");
Integer pageNum=0;
if(str==null){
pageNum=1;
}else{
pageNum=Integer.parseInt(str);
}
Page<Student> p=new StudentServicesImp().getAllByPagName(pageNum);
List<Student> list=p.getList();
for (int i = 0; i < list.size(); i++) {
Student s = list.get(i);
%>
<tr>
<td><%=(i + 1)%></td>
<td><%=s.getStuName()%></td>
<td><%=s.getStuPassWord()%></td>
<td><%=s.getStuGender()%></td>
<td><%=s.getStuPhone()%></td>
<td><%=s.getStuAddress()%></td>
<%-- <td><%=s.getStuBornDate()%></td> --%>
<%-- <td><%=s.getStuIdentityCard()%></td> --%>
<%-- <td><%=s.getStuPicture()%></td> --%>
<td><%=s.getCenterId()%></td>
<td><%=s.getCoachId()%></td>
<td><%=s.getGradeId()%></td>
<%-- <td><%=s.getStuEnterTime()%></td> --%>
<td><a href="toStudentUpdate.jsp?studentId=<%=s.getStudentId()%>">修改</a></td>
<td><a href="toStudentDelete.jsp?studentId=<%=s.getStudentId()%>">刪除</a></td>
<td><a href="showUStudentDetail.jsp?studentId=<%=s.getStudentId()%>">檢視詳情</a></td>
</tr>
<%
}
%>
</table>
<div class="box">
<div id="lt">
<span> 共有 <%=p.getTotalCount() %> 條記錄，當前第 <%=p.getPageNum() %>/<%=p.getTotalPage() %> 頁</span>
</div>
<div id="rt">
<a href="studentList.jsp?pageNum=1">首頁</a>
<a href="studentList.jsp?pageNum=<%=p.getPageNum()-1%>">上一頁</a>
<a href="studentList.jsp?pageNum=<%=p.getPageNum()+1%>">下一頁</a>
<a href="studentList.jsp?pageNum=<%=p.getTotalPage()%>">尾頁</a>
<form action="studentList.jsp" method="post" id="pageForm">
<span>轉到第 </span>
<input type="number" name="pageNum" id="pageInput" value="<%=p.getPageNum()%>"/>
<span>頁</span>
<input type="submit" value="GO" id="sub"/>
</form>
</div>
</div>
</body>
</html>
=============================================實現資料表中修改操作,對學生表進行想關修改設定;
tostudentuodate.jsp相關程式碼
<%@page import="cn.pojo.*"%>
<%@page import="java.util.List"%>
<%@page import="cn.services.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();//獲得專案的路徑 =/java48_jsp_1
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script src="laydate/laydate.js"></script>
<link rel="stylesheet" href="css/userRegister.css" >
<script src="js/userRegister.js"></script>
<body>
<%
Student u= null;
try {
String st = request.getParameter("studentId");
Integer studentId = Integer.parseInt(st);
u = new StudentServicesImp().getStudentById(studentId);
out.print(u);
} catch (Exception e) {
e.printStackTrace();
}
%>
<div class="box">
<h2>使用者修改</h2>
<form action="doStudentUpdate.jsp" method="post">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>使用者編號：</td>
<td><input type="text" name="studentId" value="<%=u.getStudentId() %>" readonly="readonly" /></td>
</tr>
<tr>
<td>使用者名稱：</td>
<td><input type="text" name="stuName" value="<%=u.getStuName() %>" placeholder="輸入使用者名稱" /></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="text" name="stuPassWord" value="<%=u.getStuPassWord() %>"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input type="text" name="stuGender" value="<%=u.getStuGender() %>" /></td>
</tr>
<tr>
<td>電話:</td>
<td><input type="text" name="stuPhone" value="<%=u.getStuPhone() %>" /></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" name="stuAddress" value="<%=u.getStuAddress() %>" /></td>
</tr>
<tr>
<td>生日:</td>
<td><input type="text" name="stuBornDate" value="<%=u.getStuBornDate() %>" id="bornDate" /></td>
</tr>
<tr>
<td>身份證號:</td>
<td><input type="text" name="stuIdentityCard" value="<%=u.getStuIdentityCard() %>" id="stuIdentityCard" /></td>
</tr>
<tr>
<td>學員照片:</td>
<td><input type="text" name="stuPicture" value="<%=u.getStuPicture() %>" id="stuPicture" /></td>
</tr>
<tr>
<td>中心編號:</td>
<td>
<select name="centerId">
<%
CenterServices ct=new CenterServicesImp();
List<Center> centerList=ct.getAllCenter();
for(int i=0;i<centerList.size();i++){
Center center=centerList.get(i);
if(u.getCenterId()==center.getCenterId()){
%>
<option value="<%=center.getCenterId()%>" selected>
<%=center.getCenterName() %></option>
<%
}else{
%>
<option value="<%=center.getCenterId()%>">
<%=center.getCenterName() %></option>
<% }
}
%>
</select>
</td>
</tr>
<tr>
<td>教練編號:</td>
<td>
<select name="coachId">
<%
CoachServices ch = new CoachServicesImp();
List<Coach> coachList=ch.getAllCoach();
for( int i = 0 ;i < coachList.size(); i++ ){
Coach coach = coachList.get(i);
if(u.getCoachId()==coach.getCoachId()){
%>
<option value="<%=coach.getCoachId()%>" selected><%=coach.getCoaName()%></option>
<%
}else{
%>
<option value="<%=coach.getCoachId()%>" ><%=coach.getCoaName()%></option>
<%
}
}
%>
</select>
</td>
</tr>
<tr>
<td>班級編號:</td>
<td>
<select name="gradeId">
<%
GradeServices cs = new GradeServicesImp();
List<Grade> gradeList=cs.getAllGrade();
for( int i = 0 ;i < gradeList.size(); i++ ){
Grade grade = gradeList.get(i);
if(u.getGradeId()==grade.getGradeId()){
%>
<option value="<%=grade.getGradeId()%>" selected><%=grade.getGradeName()%></option>
<%
}else{
%>
<option value="<%=grade.getGradeId()%>" ><%=grade.getGradeName()%></option>
<%
}
}
%>
</select>
</td>
</tr>
<tr>
<td>班級名稱:</td>
<td><input type="text" name="gradeName" value="<%=u.getGradeName() %>" id="gradeName" /></td>
</tr>
<tr>
<td>教練姓名:</td>
<td><input type="text" name="coachName" value="<%=u.getCoachName() %>" id="coachName" /></td>
</tr>
<tr>
<td>入學時間:</td>
<td><input type="text" name="stuEnterTime" value="<%=u.getStuEnterTime() %>" id="stuEnterTime" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="修改" /></td>
</tr>
<tr>
<td></td>
<td><input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
</body>
</html>
=============================================
由tostudentUpdate.jsp級聯跳轉至dostudentUpdate .jsp,以實現studentListbiao中的新增操作.相關程式碼如下:
<%@page import="cn.services.StudentServicesImp"%>
<%@page import="cn.pojo.Student"%>
<%@page import="cn.utils.PackObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();//獲得專案的路徑 =/java48_jsp_1
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>doStudentUpdate.jsp</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
Student u = PackObject.getObject(request, Student.class);
int i = new StudentServicesImp().updateStudentById(u);
response.sendRedirect("studentList.jsp");
%>
</body>
</html>
========================================================
相關刪除操作程式碼()如下:
<%@page import="cn.services.StudentServicesImp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();//獲得專案的路徑 =/java48_jsp_1
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>toStudentDelete.jsp</title>
</head>
<body>
<%
try{
request.setCharacterEncoding("UTF-8");
String st = request.getParameter("studentId");
Integer studentId = Integer.parseInt(st);
int i =new StudentServicesImp().deletStudentById(studentId);
//使用重定向：好處是重新整理頁面時，不會重複提交表單
response.sendRedirect("studentList.jsp");
}catch(Exception e){
}
%>
</body>
</html>
===============================================
檢視詳情(showStudentDetail.jsp)相關程式碼:
<%@page import="cn.pojo.Student"%>
<%@page import="cn.services.StudentServicesImp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%!Student u= null;%>
<%
Student u= null;
try {
String st = request.getParameter("studentId");
Integer studentId = Integer.parseInt(st);
u = new StudentServicesImp().getStudentById(studentId);
} catch (Exception e) {
e.printStackTrace();
}
%>
<table>
學員姓名<tr><%=u.getStuName()%></tr>
學員密碼<tr><%=u.getStuPassWord()%></tr>
學員性別<tr><%=u.getStuGender()%></tr>
學員電話<tr><%=u.getStuPhone()%></tr>
學員地址<tr><%=u.getStuAddress()%></tr>
學員生日<tr><%=u.getStuBornDate()%></tr>
身份證號<tr><%=u.getStuIdentityCard()%></tr>
學員照片<tr><%=u.getStuPicture()%></tr>
中心編號<tr><%=u.getCenterId()%></tr>
教練編號<tr><%=u.getCoachId()%></tr>
班級編號<tr><%=u.getGradeId()%></tr>
</table>
</body>
</html>
================================================
studentList.css相關程式碼如下:
@charset "UTF-8";
.table{
border=1px solid black;
cellspacing="0" ;
cellpadding="0"
cellpadding:0;
cellspacing:0;
width:80%;
text-align: center;
margin:10px auto;
}
.box{
position:relative;
width:80%;
margin:0 auto;
border:1px solid black;
}
#rt{
position: absolute;
right:0;
top:0;
}
#pageForm{
display: inline-block;
}
==============================================
demo.js相關程式碼如下:
$(function(){
$("tr:odd").css("background","grey");
});
=================================================
分頁(page.java)跳轉的相關程式碼:
package cn.utils;
import java.util.List;
public class Page<T> {
private Integer pageNum;// 當前的頁數，第幾頁
private Integer totalCount;// 總條數，總共有多少記錄
private Integer rowNum; // 當前行數
public static final Integer pageCount = 4;// 每頁4條
private Integer totalPage;// 總頁數，通過總條數計算的總頁數
private List<T> list;// 沒一頁的資料
public Integer getPageNum() {
return pageNum;
}
public Integer getTotalCount() {
return totalCount;
}
public Integer getRowNum() {
return rowNum;
}
public Integer getTotalPage() {
return totalPage;
}
public List<T> getList() {
return list;
}
// 總條數，總共有多少記錄
public void setTotalCount(Integer totalCount) {
this.totalCount = totalCount;
}
// 總頁數，通過總條數計算的總頁數
public void setTotalPage() {
this.totalPage = (totalCount % pageCount == 0) ? (totalCount / pageCount) : (totalCount / pageCount + 1);
}
// 當前的頁數
public void setPageNum(Integer pageNum) {
// 為空或者小於0
// 就是查詢當前頁數，
// 需要查詢的是 空值、0、負數，顯示的都為第一頁
// 需要查詢的 大於現存的頁數，則顯示為最後一頁
if (pageNum == null) {
this.pageNum = 1;
}
if (pageNum > totalPage) {
this.pageNum = totalPage;
} else {
this.pageNum = pageNum;
}
if (pageNum <= 0) {
this.pageNum = 1;
}
}
// 當前行號
// 當前頁的起始行，也就是從第幾行開始
public void setRowNum() {
this.rowNum = pageCount * (pageNum - 1);
}
public void setList(List<T> list) {
this.list = list;
}
@Override
public String toString() {
return "Page [totalCount=" + totalCount + ", rowNum=" + rowNum + ", totalPage=" + totalPage + ", list=" + list
+ "]";
}
}