SSM 项目分页前端 JS 代码示例

以下是一个示例的前端 JS 代码，用于实现 SSM 项目的分页功能：

// 定义全局变量
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的记录数
var totalPage; // 总页数

// 页面加载完成后执行的函数
$(document).ready(function() {
    // 初始化页面数据
    loadData();

    // 上一页按钮点击事件
    $('#prevBtn').click(function() {
        if (currentPage > 1) {
            currentPage--;
            loadData();
        }
    });

    // 下一页按钮点击事件
    $('#nextBtn').click(function() {
        if (currentPage < totalPage) {
            currentPage++;
            loadData();
        }
    });

    // 跳转按钮点击事件
    $('#jumpBtn').click(function() {
        var jumpPage = parseInt($('#jumpPage').val());
        if (jumpPage >= 1 && jumpPage <= totalPage) {
            currentPage = jumpPage;
            loadData();
        }
    });
});

// 加载数据函数
function loadData() {
    // 发送 AJAX 请求获取数据
    $.ajax({
        url: 'url/to/getData',
        type: 'GET',
        data: {
            currentPage: currentPage,
            pageSize: pageSize
        },
        success: function(response) {
            // 解析返回的数据
            var data = JSON.parse(response);
            var list = data.list;
            totalPage = data.totalPage;

            // 渲染数据到页面
            // ...

            // 更新分页信息
            $('#currentPage').text(currentPage);
            $('#totalPage').text(totalPage);

            // 更新分页按钮状态
            if (currentPage == 1) {
                $('#prevBtn').attr('disabled', true);
            } else {
                $('#prevBtn').attr('disabled', false);
            }

            if (currentPage == totalPage) {
                $('#nextBtn').attr('disabled', true);
            } else {
                $('#nextBtn').attr('disabled', false);
            }
        },
        error: function() {
            alert('Error occurred while loading data.');
        }
    });
}

在上面的代码中，我们首先定义了一些全局变量，包括当前页码、每页显示的记录数和总页数。然后，在页面加载完成后，我们初始化页面数据，并为上一页、下一页和跳转按钮绑定点击事件。在点击事件中，我们根据按钮的操作更新当前页码，并调用loadData()函数重新加载数据。在loadData()函数中，我们发送 AJAX 请求获取数据，并根据返回的数据进行页面渲染和更新分页信息。