当前位置：首页 > JavaScript

js实现前台分页

2026-02-02 23:51:27JavaScript

前台分页的实现方法

前台分页是指在浏览器端通过JavaScript对数据进行分页处理，无需每次请求服务器。适用于数据量较小或已全部加载到前端的场景。

基础实现思路

数据存储 将全部数据存储在JavaScript数组中，例如：
```
const allData = [...]; // 完整数据集
```
分页参数设置 定义每页显示数量和当前页码：
```
const itemsPerPage = 10;
let currentPage = 1;
```

数据切片处理 根据当前页码获取对应数据片段：

function getPaginatedData() {
const startIndex = (currentPage - 1) * itemsPerPage;
return allData.slice(startIndex, startIndex + itemsPerPage);
}

完整分页组件示例

class Pagination {
  constructor(data, itemsPerPage = 10) {
    this.data = data;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.totalPages = Math.ceil(data.length / itemsPerPage);
  }

  getCurrentPageData() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    return this.data.slice(start, start + this.itemsPerPage);
  }

  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
    }
    return this.getCurrentPageData();
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
    return this.getCurrentPageData();
  }

  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
    }
    return this.getCurrentPageData();
  }
}

分页控件UI实现

function renderPagination(totalPages, currentPage) {
  let html = '<div class="pagination">';

  // 上一页按钮
  html += `<button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>上一页</button>`;

  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    html += `<button class="${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
  }

  // 下一页按钮
  html += `<button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>下一页</button>`;

  html += '</div>';
  document.getElementById('pagination').innerHTML = html;
}

性能优化建议

虚拟滚动技术 对于大数据量，可结合虚拟滚动只渲染可视区域内的元素：

window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const startIndex = Math.floor(scrollPosition / itemHeight);
renderItems(startIndex, itemsPerPage);
});

Web Worker处理 将分页计算放入Web Worker避免UI阻塞：

const worker = new Worker('pagination-worker.js');
worker.postMessage({data: allData, page: currentPage});
worker.onmessage = (e) => {
displayData(e.data.pageItems);
};