编写js代码实现分页功能

编写JavaScript实现分页功能，通常会涉及到以下几个步骤：

1. **获取总数据和每页数量**:
- 获取总的项目数量，这通常是服务器端返回的。
- 设置每页显示的项目数（例如，每次加载10条数据）。

2. **计算总页数**:
- 使用总项目数除以每页数量，向上取整得到总页数。

3. **创建分页导航**:
- 创建一个HTML结构，比如ul，其中包含a标签，每个a标签代表一页，用数字或“首页”、“上一页”、“下一页”、“尾页”等标识。

4. **初始化当前页**:
- 初始加载时，给当前页一个初始值（如1）。

5. **处理页面点击事件**:
- 当用户点击分页链接时，更新当前页变量，然后根据新页数从服务器获取数据（也可以预加载部分数据）。

6. **动态加载数据**:
- 根据当前页数请求对应的数据显示内容到DOM中。

7. **可能需要的状态管理**:
- 使用localStorage或者sessionStorage保存用户的分页状态，确保在刷新页面时能记住上次的位置。

以下是一个简单的例子（假设有一个数组模拟数据源）:

let data = []; // 假设这是总数据
const itemsPerPage = 10;
let currentPage = 1;

// 获取总页数
function getTotalPages() {
  return Math.ceil(data.length / itemsPerPage);
}

// 分页逻辑
function loadPage(pageNumber) {
  const start = (pageNumber - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const pageData = data.slice(start, end); // 获取对应页的数据

  displayData(pageData);
}

// 显示数据
function displayData(pageData) {
  // 清空现有数据
  document.getElementById('content').innerHTML = '';

  // 将数据添加到DOM中
  pageData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    document.getElementById('content').appendChild(li);
  });
}

// 监听分页按钮点击
document.querySelectorAll('.page-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    currentPage = parseInt(this.innerText);
    loadPage(currentPage);
  });
})

loadPage(currentPage); // 初始化加载第一页

请注意，这个示例没有涉及与服务器交互，实际生产环境中你需要配合AJAX或者Fetch API从服务器获取数据。