js 分页 异步加载数据

let currentPage = 1;
const pageSize = 10;

function loadData(page) {
    fetch(`/api/data?page=${page}&size=${pageSize}`)
        .then(response => response.json())
        .then(data => {
            // 更新页面内容
            displayData(data);
        })
        .catch(error => console.error('Error:', error));
}

function displayData(data) {
    const container = document.getElementById('data-container');
    container.innerHTML = ''; // 清空现有内容
    data.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.name; // 假设每个数据项有一个name属性
        container.appendChild(div);
    });
}

// 初始加载第一页数据
loadData(currentPage);

// 添加分页按钮事件监听
document.getElementById('next-page').addEventListener('click', () => {
    currentPage++;
    loadData(currentPage);
});