使用jquery实现分页查询数据

/*
 * 分页查询数据相关的 JavaScript 函数
 */

var PAGE_SIZE = 10;         // 每页显示的记录数
var TOTAL_PAGES = 20;       // 总页数（假设为 20）

// 向后台发送异步请求，获取指定页码的数据，并将其显示在指定的 DIV 元素中
function getDataWithPage(page) {
    var startIndex = (page - 1) * PAGE_SIZE + 1;
    var endIndex = startIndex + PAGE_SIZE - 1;
    $.ajax({
        url: 'data.php',        // 后台数据接口 URL
        method: 'GET',
        data: {
            startIndex: startIndex,
            endIndex: endIndex
        },
        success: function(data) {
            // 将获取到的数据显示在指定的 DIV 元素中
            $('#data').html(data);
        },
        error: function() {
            alert('获取数据失败');
        }
    });
}

// 生成分页控件，并为分页控件的每个按钮设置事件监听器
function generatePaging(currentPage) {
    var pagingHTML = '
';
    if (currentPage == 1) {
        pagingHTML += '
上一页
';
    } else {
        pagingHTML += '
上一页
';
    }
    for (var i = 1; i <= TOTAL_PAGES; i++) {
        if (i === currentPage) {
            pagingHTML += '
' + i + '
';
        } else {
            pagingHTML += '
' + i + '
';
        }
    }
    if (currentPage == TOTAL_PAGES) {
        pagingHTML += '
下一页
';
    } else {
        pagingHTML += '
下一页
';
    }
    pagingHTML += '
';
    $('#paging').html(pagingHTML);
}

/*
 * 分页控件相关的 CSS 样式
 */

#paging ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#paging ul li {
    display: inline-block;
    margin: 0 5px;
    padding: 0;
}

#paging ul li span {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    cursor: default;
}

#paging ul li a {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    text-decoration: none;
}

#paging ul li a:hover {
    background-color: #f5f5f5;
}

#paging ul li .current {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    color: #333;
    cursor: default;
}

#paging ul li .disabled {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #bbb;
    cursor: default;
}