当前位置：首页 > JavaScript

原生js实现分页思路

2026-03-01 16:47:47JavaScript

分页功能的基本思路

分页功能的核心是将大量数据分割成多个页面显示，通常需要以下关键参数：总数据量（total）、每页显示条数（pageSize）、当前页码（currentPage）。实现时需要计算总页数，并根据当前页码动态渲染数据。

计算总页数

总页数通过总数据量除以每页显示条数并向上取整获得。数学公式如下：

[ totalPages = \lceil \frac{total}{pageSize} \rceil ]

JavaScript实现代码：

const totalPages = Math.ceil(total / pageSize);

数据切片处理

根据当前页码和每页条数，从总数据中截取对应片段。数组切片公式：

原生js实现分页思路

[ startIndex = (currentPage - 1) \times pageSize ] [ endIndex = startIndex + pageSize ]

代码实现：

const paginatedData = data.slice(
  (currentPage - 1) * pageSize,
  currentPage * pageSize
);

分页器DOM渲染

创建分页按钮的典型逻辑：

原生js实现分页思路

显示首页和上一页按钮（当前页不是第一页时）
显示当前页前后各2页的页码按钮
显示下一页和末页按钮（当前页不是最后一页时）

示例代码片段：

function renderPagination() {
  let html = '';
  if (currentPage > 1) {
    html += `<button onclick="changePage(1)">首页</button>`;
    html += `<button onclick="changePage(${currentPage - 1})">上一页</button>`;
  }

  // 页码按钮逻辑
  for (let i = Math.max(1, currentPage - 2); 
       i <= Math.min(totalPages, currentPage + 2); 
       i++) {
    html += `<button class="${i === currentPage ? 'active' : ''}" 
             onclick="changePage(${i})">${i}</button>`;
  }

  if (currentPage < totalPages) {
    html += `<button onclick="changePage(${currentPage + 1})">下一页</button>`;
    html += `<button onclick="changePage(${totalPages})">末页</button>`;
  }
  document.getElementById('pagination').innerHTML = html;
}

事件处理与状态更新

页码变更时需要更新当前页码并重新渲染数据和分页器：

function changePage(page) {
  currentPage = page;
  renderData();
  renderPagination();
}

完整实现示例

// 初始化参数
let data = [...]; // 原始数据数组
let currentPage = 1;
const pageSize = 10;

function initPagination() {
  renderData();
  renderPagination();
}

function renderData() {
  const start = (currentPage - 1) * pageSize;
  const pageData = data.slice(start, start + pageSize);
  // 渲染pageData到页面...
}

function renderPagination() {
  const totalPages = Math.ceil(data.length / pageSize);
  // ...同上文分页器渲染逻辑
}

// 页面加载时初始化
window.onload = initPagination;