React 分页 - JavaScript

简介

在 Web 应用程序中，分页是常见的需求之一，特别是在大型数据列表中。React 是一种 JavaScript 库，可以用来构建用户界面，可以方便的实现分页组件。本文将介绍如何使用 React 分页组件实现分页功能。

实现

安装

首先需要在项目中安装 react 和 react-dom：

npm install react react-dom

然后安装分页组件：

npm install react-paginate --save

使用

导入 react-paginate ：

import ReactPaginate from 'react-paginate';

定义分页组件：

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 0, // 当前页码
    };
  }

  onPageChange = (data) => {
    const { selected } = data; // 获取点击的页码
    this.setState({ currentPage: selected }); // 更新当前页码
  };

  render() {
    const { perPage, totalRecords } = this.props; // 每页显示数量，总记录数
    const { currentPage } = this.state; // 当前页码
    const pageCount = Math.ceil(totalRecords / perPage); // 总页码

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

在页面中使用：

<Pagination perPage={10} totalRecords={100} />

参数

• previousLabel：上一页按钮的显示文本（可选，默认为“上一页”）。
• nextLabel：下一页按钮的显示文本（可选，默认为“下一页”）。
• pageCount：总页数（必需）。
• onPageChange：翻页回调函数（必需）。
• marginPagesDisplayed：页数显示的左右间隔（可选，默认为2）。
• pageRangeDisplayed：允许显示的页码数量（可选，默认为5）。
• containerClassName：容器的 CSS 类名称（可选，默认为“pagination”）。
• activeClassName：激活页的 CSS 类名称（可选，默认为“active”）。
• forcePage：设置当前页码（可选，默认为0）。

总结

React 分页组件提供了一种简单且易于使用的方法，方便地在 Web 应用程序中实现分页功能。使用以上所述的方式定义和使用 React 分页组件，可以轻松地为你的应用程序添加分页功能。