jsp-curd+分页倒导航案例

效果图
在这里插入图片描述

<!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">&times;</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>