当前位置：首页 > JavaScript

js实现前台分页

2026-04-07 17:41:59JavaScript

实现前台分页的基本思路

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

核心代码示例

// 假设已有全部数据
const allData = [...]; // 你的数据数组
const pageSize = 10; // 每页显示数量
let currentPage = 1; // 当前页码

// 获取分页数据函数
function getPaginatedData() {
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return allData.slice(startIndex, endIndex);
}

// 渲染分页数据
function renderData() {
  const pageData = getPaginatedData();
  // 渲染逻辑...
}

// 生成分页按钮
function renderPagination() {
  const totalPages = Math.ceil(allData.length / pageSize);
  let paginationHTML = '';

  for (let i = 1; i <= totalPages; i++) {
    paginationHTML += `
      <button class="page-btn ${i === currentPage ? 'active' : ''}" 
              onclick="changePage(${i})">
        ${i}
      </button>
    `;
  }

  document.getElementById('pagination').innerHTML = paginationHTML;
}

// 切换页码
function changePage(page) {
  currentPage = page;
  renderData();
  renderPagination();
}

// 初始化
renderData();
renderPagination();

优化分页功能

function renderPagination() {
  const totalPages = Math.ceil(allData.length / pageSize);
  let paginationHTML = '';

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

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

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

  document.getElementById('pagination').innerHTML = paginationHTML;
}

完整HTML结构示例

<div id="data-container"></div>
<div id="pagination"></div>

<script>
// 这里放置上面的JavaScript代码
</script>

样式建议

为分页按钮添加基本样式：

.page-btn {
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.page-btn:hover {
  background: #eee;
}

.page-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}