效果图
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<!-- 引入Bootstrap的CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery的CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="mt-5">学生管理</h1>
<!-- 搜索表单 -->
<div class="mb-3">
<form id="searchForm" class="form-inline">
<input type="text" id="keyword" class="form-control mr-2" placeholder="请输入关键词">
<button type="button" class="btn btn-primary" onclick="searchStudents()">搜索</button>
</form>
</div>
<!-- 新增学生按钮 -->
<div class="mb-3">
<button type="button" class="btn btn-success" onclick="showAddStudentModal()">新增学生</button>
</div>
<!-- 学生列表 -->
<div id="studentTable" class="table-responsive"></div>
<!-- 分页控件 -->
<nav>
<ul class="pagination" id="pagination"></ul>
</nav>
<!-- 模态框用于新增和编辑学生 -->
<div class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="studentModalLabel">学生信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="studentForm">
<input type="hidden" id="studentId">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="form-group">
<label for="gender">性别</label>
<select class="form-control" id="gender" required>
<option value="M">男</option>
<option value="F">女</option>
</select>
</div>
<div class="form-group">
<label for="className">班级</label>
<input type="text" class="form-control" id="className" required>
</div>
<div class="form-group">
<label for="studentNumber">学号</label>
<input type="text" class="form-control" id="studentNumber" required>
</div>
<div class="form-group">
<label for="phoneNumber">手机号</label>
<input type="text" class="form-control" id="phoneNumber" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
let currentPage = 1;
let pageSize = 5;
// 初始化加载学生列表
$(document).ready(function() {
loadStudents();
});
function loadStudents() {
$.ajax({
url: '/student',
type: 'GET',
data: {
operation: 'findByKeyword',
keyword: $('#keyword').val(),
page: currentPage,
pageSize: pageSize
},
success: function(response) {
if (response.code === 200) {
renderStudentTable(response.data);
renderPagination(response.other);
} else {
alert(response.msg);
}
}
});
}
function renderStudentTable(students) {
let table = `<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>学号</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody>`;
students.forEach(student => {
table += `<tr data-id="${student.id}" data-name="${student.name}" data-gender="${student.gender}"
data-classname="${student.className}" data-studentnumber="${student.studentNumber}" data-phonenumber="${student.phoneNumber}">
<td>${student.name}</td>
<td>${student.gender}</td>
<td>${student.className}</td>
<td>${student.studentNumber}</td>
<td>${student.phoneNumber}</td>
<td>
<button class="btn btn-sm btn-primary" onclick="editStudent(this)">编辑</button>
<button class="btn btn-sm btn-danger" onclick="deleteStudent(${student.id})">删除</button>
</td>
</tr>`;
});
table += `</tbody></table>`;
$('#studentTable').html(table);
}
function renderPagination(totalCount) {
let totalPages = Math.ceil(totalCount / pageSize);
let pagination = '';
for (let i = 1; i <= totalPages; i++) {
pagination += `<li class="page-item ${i === currentPage ? 'active' : ''}">
<button class="page-link" onclick="changePage(${i})">${i}</button>
</li>`;
}
$('#pagination').html(pagination);
}
function changePage(page) {
currentPage = page;
loadStudents();
}
function searchStudents() {
currentPage = 1;
loadStudents();
}
function showAddStudentModal() {
$('#studentId').val('');
$('#name').val('');
$('#gender').val('M');
$('#className').val('');
$('#studentNumber').val('');
$('#phoneNumber').val('');
$('#studentModalLabel').text('新增学生');
$('#studentModal').modal('show');
}
function editStudent(button) {
let row = $(button).closest('tr');
$('#studentId').val(row.data('id'));
$('#name').val(row.data('name'));
$('#gender').val(row.data('gender'));
$('#className').val(row.data('classname'));
$('#studentNumber').val(row.data('studentnumber'));
$('#phoneNumber').val(row.data('phonenumber'));
$('#studentModalLabel').text('编辑学生');
$('#studentModal').modal('show');
}
function saveStudent() {
let student = {
id: $('#studentId').val(),
name: $('#name').val(),
gender: $('#gender').val(),
className: $('#className').val(),
studentNumber: $('#studentNumber').val(),
phoneNumber: $('#phoneNumber').val()
};
let operation = student.id ? 'updateStudent' : 'register';
$.ajax({
url: '/student',
type: 'POST',
data: {
operation: operation,
...student
},
success: function(response) {
if (response.code === 200) {
$('#studentModal').modal('hide');
loadStudents();
} else {
alert(response.msg);
}
}
});
}
function deleteStudent(id) {
if (confirm('确定要删除这个学生吗？')) {
$.ajax({
url: '/student',
type: 'POST',
data: {
operation: 'deleteStudent',
studentId: id
},
success: function(response) {
if (response.code === 200) {
loadStudents();
} else {
alert(response.msg);
}
}
});
}
}
</script>
</body>
</html>
