当前位置：首页 > JavaScript

js 分页实现

2026-03-14 15:15:38JavaScript

分页实现方法

分页功能在前端开发中非常常见，可以通过多种方式实现。以下是几种常见的分页实现方法：

前端分页实现

使用数组的slice方法可以实现简单的前端分页：

js 分页实现

const paginate = (array, pageNumber, pageSize) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
};

后端API分页实现

与后端配合实现分页通常需要传递分页参数：

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

分页组件实现

创建一个可复用的分页组件：

js 分页实现

function Pagination({ currentPage, totalPages, onPageChange }) {
  return (
    <div className="pagination">
      <button 
        disabled={currentPage === 1}
        onClick={() => onPageChange(currentPage - 1)}
      >
        上一页
      </button>

      {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
        <button
          key={page}
          className={currentPage === page ? 'active' : ''}
          onClick={() => onPageChange(page)}
        >
          {page}
        </button>
      ))}

      <button
        disabled={currentPage === totalPages}
        onClick={() => onPageChange(currentPage + 1)}
      >
        下一页
      </button>
    </div>
  );
}

分页逻辑处理

处理分页数据时的常见逻辑：

const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;

const handlePageChange = (page) => {
  setCurrentPage(page);
  // 可以在这里触发数据获取或过滤逻辑
};

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

分页样式处理

基本的分页样式示例：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

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

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}