AJAX分页+（CRUD）

以下是一个简化的示例，展示了如何使用AJAX实现分页和简单的CRUD操作：

<!-- 分页导航 -->
<div id="pagination">
    <a href="#" class="page-link" data-page="1">首页</a>
    <a href="#" class="page-link" data-page="prev">上一页</a>
    <a href="#" class="page-link" data-page="next">下一页</a>
    <a href="#" class="page-link" data-page="last">尾页</a>
</div>
 
<!-- 用户列表 -->
<table id="users-table">
    <!-- 表头 -->
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
    </thead>
    <!-- 表身：使用AJAX动态填充 -->
    <tbody>
    </tbody>
</table>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 获取用户列表
    function fetchUsers(page) {
        $.ajax({
            url: 'server.php', // 后端处理文件
            type: 'GET',
            data: { page: page },
            dataType: 'json',
            success: function(response) {
                // 假设返回的response格式为：{users: [], total_pages: 10}
                var users = response.users;
                var html = '';
                for(var i = 0; i < users.length; i++) {
                    html += '<tr>' +
                                '<td>' + users[i].id + '</td>' +
                                '<td>' + users[i].name + '</td>' +
                                '<td><button class="edit-user" data-id="' + users[i].id + '">编辑</button> <button class="delete-user" data-id="' + users[i].id + '">删除</button></td>' +
                            '</tr>';
                }
                $('#users-table tbody').html(html);
                
                // 初始化分页导航
                $('#pagination .page-link').removeClass('active');
                $('#pagination .page-link[data-page="' + page + '"]').addClass('active');
            }
        });
    }
    
    // 分页导航点击事件
    $('#pagination .page-link').click(function() {
        var page = $(this).data('page');
        if(page === 'prev' || page === 'next') {
            page = parseInt($('#pagination .page-link.active').data('page')) + (page === 'next' ? 1 : -1);
        }
        fetchUsers(page);
    });
 
    // 默认加载第一页
    fetchUsers(1);
 
    // 编辑用户
    $('#users-table').on('click', '.edit-user', function() {