mysql分页的前端

SELECT * FROM table_name LIMIT 10 OFFSET 20;

SELECT * FROM table_name WHERE id > 20 ORDER BY id LIMIT 10;

<div id="pagination">
    <button id="prev-page">上一页</button>
    <span id="page-info"></span>
    <button id="next-page">下一页</button>
</div>
<div id="data-container"></div>

var currentPage = 1;
var pageSize = 10;

function loadData(page) {
    $.ajax({
        url: '/get-data', // 后端接口地址
        type: 'GET',
        data: { page: page, pageSize: pageSize },
        success: function (data) {
            $('#data-container').html(data.items); // 渲染数据
            $('#page-info').text('第 ' + data.page + ' 页，共 ' + data.totalPages + ' 页');
            currentPage = page;
        },
        error: function () {
            alert('加载数据失败！');
        }
    });
}

$(document).ready(function () {
    loadData(currentPage);

    $('#prev-page').click(function () {
        if (currentPage > 1) {
            loadData(currentPage - 1);
        }
    });

    $('#next-page').click(function () {
        loadData(currentPage + 1);
    });
});

@app.route('/get-data')
def get_data():
    page = request.args.get('page', default=1, type=int)
    pageSize = request.args.get('pageSize', default=10, type=int)
    
    offset = (page - 1) * pageSize
    query = "SELECT * FROM table_name LIMIT %s OFFSET %s"
    results = execute_query(query, (pageSize, offset))
    
    total_count = get_total_count() // 获取总记录数
    totalPages = (total_count + pageSize - 1) // pageSize
    
    return jsonify({
        'items': results,
        'page': page,
        'totalPages': totalPages
    })