当前位置：首页 > JavaScript

分页实现js

2026-02-01 20:28:53JavaScript

分页实现的基本思路

分页功能通常用于处理大量数据，将数据分成多个页面展示，提升用户体验。前端分页的实现需要结合数据获取和页面渲染逻辑。

客户端分页实现

假设已有完整数据数组，仅需前端分页展示：

分页实现js

// 示例数据
const allData = Array.from({length: 100}, (_, i) => ({id: i+1, content: `Item ${i+1}`}));

// 分页参数
let currentPage = 1;
const pageSize = 10;

// 获取当前页数据
function getCurrentPageData() {
  const start = (currentPage - 1) * pageSize;
  const end = start + pageSize;
  return allData.slice(start, end);
}

// 渲染分页数据
function renderPage() {
  const pageData = getCurrentPageData();
  // 渲染逻辑...
  console.log(`当前页数据:`, pageData);
}

// 分页控件事件
document.getElementById('prev').addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    renderPage();
  }
});

document.getElementById('next').addEventListener('click', () => {
  if (currentPage < Math.ceil(allData.length / pageSize)) {
    currentPage++;
    renderPage();
  }
});

服务端分页实现

从后端API获取分页数据更为常见，需要传递分页参数：

async function fetchPaginatedData(page, size) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  return response.json();
}

// 使用示例
fetchPaginatedData(1, 10).then(data => {
  console.log('第一页数据:', data.items);
  console.log('总页数:', data.totalPages);
});

分页UI组件实现

结合HTML创建完整分页控件：

分页实现js

<div id="pagination">
  <button id="prev">上一页</button>
  <span id="pageInfo">第1页</span>
  <button id="next">下一页</button>
</div>

<script>
  const pagination = {
    currentPage: 1,
    totalPages: 10,
    updateUI() {
      document.getElementById('pageInfo').textContent = 
        `第${this.currentPage}页/共${this.totalPages}页`;
      document.getElementById('prev').disabled = this.currentPage === 1;
      document.getElementById('next').disabled = this.currentPage === this.totalPages;
    }
  };

  document.getElementById('prev').addEventListener('click', () => {
    if (pagination.currentPage > 1) {
      pagination.currentPage--;
      pagination.updateUI();
      // 加载数据...
    }
  });

  document.getElementById('next').addEventListener('click', () => {
    if (pagination.currentPage < pagination.totalPages) {
      pagination.currentPage++;
      pagination.updateUI();
      // 加载数据...
    }
  });
</script>

分页库的使用

现有库如react-paginate(React)或v-pagination(Vue)可简化开发：

React示例：

import ReactPaginate from 'react-paginate';

function MyComponent() {
  const handlePageClick = (data) => {
    const selectedPage = data.selected + 1;
    console.log('跳转到页:', selectedPage);
  };

  return (
    <ReactPaginate
      previousLabel={'上一页'}
      nextLabel={'下一页'}
      breakLabel={'...'}
      pageCount={20}
      marginPagesDisplayed={2}
      pageRangeDisplayed={5}
      onPageChange={handlePageClick}
      containerClassName={'pagination'}
      activeClassName={'active'}
    />
  );
}