分页 Pagination

Pagination 组件是一个分页组件，用于在大数据表格或列表中进行分页操作，支持页面大小切换、快速跳转、上一页/下一页切换等功能。

---

📦 引入方式

import { Pagination } from '@npmqg/react-ui-pagination-push';

---

🧩 使用示例

📚 基本用法

示例

当前 {page}-{pageSize}/共 {total}条

跳至

页

源码

 import { useState } from "react";
 import { Pagination } from "@npmqg/react-ui-pagination-push";

 export default function DemoPagination() {
     const [current, setCurrent] = useState(1);
     const [pageSize, setPageSize] = useState(10);

      const handlePageChange = (page, pageSize) => {
        setCurrent(page);
        setPageSize(pageSize);
      };

      const handleSizeChange = (current, pageSize) => {
        setCurrent(current);
        setPageSize(pageSize);
      };

      return (
        <Pagination
          current={current}
          pageSize={pageSize}
          total={100}
          onChange={handlePageChange}
          onShowSizeChange={handleSizeChange}
        />
      );
 }

📚 简洁模式

示例

当前 {page}-{pageSize}/共 {total}条

1/2

跳至

页

源码

<Pagination
simple={true}
current={current}
pageSize={pageSize}
total={100}
onChange={handlePageChange}
/>

---

🧩 Props

📚Pagination 组件 Props

名称	类型	默认值	描述
onChange	(page: number, pageSize: number) => void	() => {}	页码变化时触发的回调函数
onShowSizeChange	(current: number, pageSize: number) => void	() => {}	页大小变化时触发的回调函数
size	`'small'	'default'`	'small'	设置组件的大小，支持 'small' 和 'default' 两种模式
total	number	0	数据的总条数
simple	boolean	false	是否启用简洁模式，简洁模式下仅显示当前页码/总页数
current	number	1	当前页码
pageSize	number	10	每页显示的条目数
pageSizeOptions	number[]	[10, 25, 50, 100, 150, 200, 500, 1000, 1000000]	页面大小选择项数组
showQuickJumper	boolean	true	是否显示快速跳转功能
showSizeChanger	boolean	true	是否显示页大小切换功能
showTotalTxt	boolean	true	是否显示总条数文本
className	string	''	自定义样式类名

---

🔧 功能概述

📚 页码切换

支持页码按钮的切换。根据 current 属性来确定当前页码，并通过 onChange 回调来更新页码。

📚 页大小切换

支持通过 Select 组件来选择每页显示的条目数。onShowSizeChange 回调会触发页大小变化。

📚 快速跳转

启用 showQuickJumper 后，可以直接输入页码并按下回车键跳转到相应页码。

📚🔘 简洁模式

在简洁模式下，组件仅显示当前页和总页数，而不显示页码按钮。

---

🎨 样式说明

Pagination 组件使用了自定义样式文件 index.scss，并通过 clsx 来动态组合类名。以下是主要样式类的用途：

• .Pagination: 组件的主要容器样式。
• .Pagination .pagination-box: 分页按钮的样式。
• .Pagination .pagination-total: 总条数文本的样式。 你可以根据项目需求覆盖这些类名或者传递自定义 className 来进行样式自定义。

---

🎯 常见问题

📚 如何隐藏页码按钮？

可以通过简洁模式（simple={true}）来只显示当前页和总页数，而不显示页码按钮。

📚 如何处理无数据时的分页显示？

当 total 为 0 时，组件将不会渲染分页内容。你可以根据需要通过设置 ConditionalRender 来控制组件的显示或隐藏。

---

🎨 自定义功能

你可以通过扩展该组件，添加自定义的分页功能，如：

• 自定义页码样式
• 添加更多的交互功能（如跳转到第一页或最后一页）

只需要传递自定义内容或处理 onChange 和 onShowSizeChange 回调即可。