手机页面js静态分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态分页示例</title>
</head>
<body>
    <div id="content"></div>
    <button id="prevPage">上一页</button>
    <button id="nextPage">下一页</button>

    <script src="script.js"></script>
</body>
</html>

let currentPage = 1;
const pageSize = 10; // 每页显示的数据条数
const totalPages = 5; // 总页数（假设）

function fetchData(page) {
    fetch(`/api/data?page=${page}&size=${pageSize}`)
        .then(response => response.json())
        .then(data => {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = ''; // 清空内容
            data.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.textContent = item.name; // 假设数据项有一个name属性
                contentDiv.appendChild(itemDiv);
            });
        })
        .catch(error => console.error('Error fetching data:', error));
}

document.getElementById('prevPage').addEventListener('click', () => {
    if (currentPage > 1) {
        currentPage--;
        fetchData(currentPage);
    }
});

document.getElementById('nextPage').addEventListener('click', () => {
    if (currentPage < totalPages) {
        currentPage++;
        fetchData(currentPage);
    }
});

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