jsp-curd+分页倒导航案例

效果图
bash 复制代码
<!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>