基于jquery的web分页实现

$(document).ready(function() {
    var currentPage = 1; // 当前页面
    var pageSize = 10; // 每页显示数量
    var totalRecords = 0; // 总记录数
    var totalPages = 0; // 总页数
 
    // 获取数据
    function fetch_data(page) {
        $.ajax({
            url: "server.php", // 服务器端脚本
            method: "GET", // 请求方法
            data: { page: page, size: pageSize }, // 发送到服务器的数据
            dataType: "json", // 服务器响应的数据类型
            success: function(response) {
                // 更新页面上的数据
                $('#data-table tbody').empty();
                var tr;
                for (var i = 0; i < response.data.length; i++) {
                    tr = $('<tr/>');
                    tr.append($('<td/>', { html: response.data[i].id }));
                    tr.append($('<td/>', { html: response.data[i].name }));
                    $('#data-table tbody').append(tr);
                }
 
                // 更新分页信息
                totalRecords = response.totalRecords;
                totalPages = Math.ceil(totalRecords / pageSize);
                buildPagination(page);
            }
        });
    }
 
    // 构建分页
    function buildPagination(currentPage) {
        var pagination = $('#pagination');
        pagination.empty();
 
        // 构建上一页按钮
        if (currentPage > 1) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: 'Prev',
                click: function() {
                    fetch_data(currentPage - 1);
                }
            })));
        }
 
        // 构建页码
        for (var i = 1; i <= totalPages; i++) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: i,
                class: (i === currentPage) ? 'active' : '',
                click: function() {
                    fetch_data(i);
                }
            })));
        }
 
        // 构建下一页按钮
        if (currentPage < totalPages) {
            pagination.append($('<li/>').append($('<a/>', {
                href: 'javascript:void(0);',
                text: 'Next',
                click: function() {
                    fetch_data(currentPage + 1);
                }
            })));
        }
    }
 
    // 初始加载第一页数据
    fetch_data(currentPage);
 
    // 监听页码点击事件
    $(document).on('click', '#pagination li a', function(event) {
        var clickedPage