渲染
!DOCTYPE html
%@ 页面语言=\’java\’ contentType=\’text/html\’ 字符集=UTF-8\’ pageEncoding=\’UTF-8\’%;
html lang=\’en\’
头
元字符集=\’UTF-8\’
职称学生管理/职称
!– Bootstrap 的CDN 介绍–
链接href=\’https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css\’ rel=\’stylesheet\’
!– 介绍jQuery 的CDN —
脚本src=\’https://code.jquery.com/jquery-3.5.1.min.js\’/script
脚本src=\’https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js\’/script
/头
身体
div 类=\’容器\’
h1 class=\’mt-5\’学生管理/h1
!– 搜索表格–
div 类=\’mb-3\’
表单id=\’searchForm\’ 类=\’form-inline\’
input type=\’text\’ id=\’keyword\’ class=\’form-control mr-2\’ placeholder=\’请输入关键字\’
按钮类型=\’按钮\’类=\’btn btn-primary\’onclick=\’searchStudents()\’搜索/按钮
/形状
/div
!– 添加新学生按钮–
div 类=\’mb-3\’
按钮type=\’button\’ class=\’btn btn-success\’ onclick=\’showAddStudentModal()\’添加学生/按钮
/div
!–学生名单–
div id=\’studentTable\’ class=\’table-sensitive\’/div
!– 分页控制–
导航
ul class=\’分页\’ id=\’分页\’/ul
/导航
!– 模态框用于添加和编辑学生–
div class=\’modal fade\’ id=\’studentModal\’ tabindex=\’-1\’ aria-labelledby=\’studentModalLabel\’ aria-hidden=\’true\’
div class=\’模态对话框\’
div class=\’模态内容\’
div class=\’模态标题\’
h5 class=\’modal-title\’ id=\’studentModalLabel\’学生信息/h5
按钮类型=\’按钮\’类=\’关闭\’data-dismiss=\’modal\’ aria-label=\’关闭\’
跨度aria-hidden=\’true\’times;/span
/按钮
/div
div class=\’模态体\’
表格ID=\’studentForm\’
输入类型=\’隐藏\’id=\’studentId\’
div class=\’形成组\’
label for=\’name\’名称/标签
输入type=\’text\’ class=\’form-control\’ id=\’name\’ 必填
/div
div class=\’形成组\’
标签for=\’性别\’ 性别/标签
select class=\’form-control\’ id=\’gender\’ 必需
选项值=\’M\’男/选项
选项值=\’F\’女/选项
/选择
/div
div class=\’形成组\’
label for=\’className\’ 类/标签
输入type=\’text\’ class=\’form-control\’ id=\’className\’ 必填
/div
div class=\’形成组\’
label for=\’studentNumber\’学号/标签
输入type=\’text\’ class=\’form-control\’ id=\’studentNumber\’ 必填
/div
div class=\’形成组\’
label for=\’phoneNumber\’电话号码/标签
input type=\’text\’ class=\’form-control\’ id=\’phoneNumber\’ 必填
/div
/形状
/div
div class=\’模态页脚\’
按钮类型=\’按钮\’ 类=\’btn btn-secondary\’ data-dismiss=\’modal\’ 取消/按钮
按钮类型=\’按钮\’类=\’btn btn-primary\’ onclick=\’saveStudent()\’保存/按钮
/div
/div
/div
/div
/div
脚本
让当前页=1。
让页面大小=5。
//初始化加载学生列表
$(文档).ready(函数() {
加载学生（）；
});
函数loadStudents() {
$.ajax({
url: \’/学生\’,
输入：\’获取\’，
数据： {
操作： \’按关键字搜索\’,
关键字： $(\’#keyword\’).val(),
第：页当前页，
页面大小： 页面大小
},
success: 函数（响应）{
if (response.code===200) {
renderStudentTable(response.data);
renderPagination(response.other);
} 除此之外{
警报（响应.msg）；
}
}
});
}
函数renderStudentTable(学生) {
let table=`table class=\’table 表条纹\’
广告
t
第名称/第
第性别/第
上课时间
第学生人数/第
第个手机号码/第
第一次手术/第一次手术
/tr
/广告
身体`;
学生.forEach（学生={
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${学生姓名}/td
td${学生.性别}/td
td${学生.班级名称}/td
td${student.studentNumber}/td
td${学生电话号码}/td
塔
按钮类=\’btn btn-sm btn-primary\’ onclick=\’editStudent(this)\’编辑/按钮
按钮类=\’btn btn-sm btn-danger\’onclick=\’deleteStudent(${student.id})\’删除/按钮
/td
/tr`;
});
表+=`/tbody/表`;
$(\’#studentTable\’).html(表);
}
函数renderPagination(totalCount) {
TotalPages=Math.ceil(totalCount/pageSize);
分页=\’\’；
for (让i=1; i=总页数； i++) {
分页+=`li class=\’page-item ${i===currentPage \’ : \’\’}\’
按钮class=\’page-link\’ onclick=\’changePage(${i})\’${i}/button
/li`;
}
$(\’#pagination\’).html(分页);
}
函数更改页面（页面）{
当前页=页；
加载学生（）；
}
函数searchStudents() {
当前页=1；
加载学生（）；
}
函数showAddStudentModal() {
$(\’#studentId\’).val(\’\’);
$(\’#name\’).val(\’\’);
$(\’#gender\’).val(\’M\’);
$(\’#className\’).val(\’\’);
$(\’#studentNumber\’).val(\’\’);
$(\’#phoneNumber\’).val(\’\’);
$(\’#studentModalLabel\’).text(\’添加学生\’);
$(\’#studentModal\’).modal(\’show\’);
}
函数editStudent(按钮) {
让row=$(button).closest(\’tr\’);
$(\’#studentId\’).val(row.data(\’id\’));
$(\’#name\’).val(row.data(\’name\’));
$(\’#gender\’).val(row.data(\’性别\’));
$(\’#className\’).val(row.data(\’classname\’));
$(\’#studentNumber\’).val(row.data(\’studentNumber\’));
$(\’#phoneNumber\’).val(row.data(\’phonenumber\’));
$(\’#studentModalLabel\’).text(\’编辑学生\’);
$(\’#studentModal\’).modal(\’show\’);
}
函数saveStudent() {
让学生={
id: $(\’#studentId\’).val(),
name: $(\’#name\’).val(),
性别： $(\’#gender\’).val(),
className: $(\’#className\’).val(),
学号： $(\’#学号\’).val(),
电话号码： $(\’#电话号码\’).val()
};
让操作=student.id ? \’updateStudent\’ : \’注册\’;
$.ajax({
url: \’/学生\’,
type: \’帖子\’,
数据： {
操作：操作，
.学生
},
success: 函数（响应）{
if (response.code===200) {
$(\’#studentModal\’).modal(\’隐藏\’);
加载学生（）；
} 除此之外{
警报（响应.msg）；
}
}
});
}
函数deleteStudent(id) {
if (confirm(\’您确定要删除该学生吗？\’)) {
$.ajax({
url: \’/学生\’,
type: \’帖子\’,
数据： {
操作： \’删除学生\’,
学号：
},
success: 函数（响应）{
if (response.code===200) {
加载学生（）；
} 除此之外{
警报（响应.msg）；
}
}
});
}
}
/剧本
/身体
/html
以上关于#jsp的相关内容来源仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/91505.html
