分页 Pagination

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

---

📦 引入方式

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

---

🧩 使用示例

📚 基本用法

示例

Loading...

源码

 import { useState } from "react";
 import { Pagination } from "@itera-web/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}
       />
     );
 }

📚 简洁模式

示例

Loading...

源码

<Pagination
   simpleInputMode
   simple
   size="large"
   current={1}
   pageSize={10}
   total={100}
   showTotalTxt={false}
   showQuickJumper={false}
   showSizeChanger={false}
 />

📚 尺寸

示例

Loading...

源码

          <Pagination
            size="large"
            current={1}
            pageSize={10}
            total={100}
            showTotalTxt={false}
            showQuickJumper={false}
            showSizeChanger={false}
          />

          <Pagination
            size="default"
            current={1}
            pageSize={10}
            total={100}
            showTotalTxt={false}
            showQuickJumper={false}
            showSizeChanger={false}
          />

          <Pagination
            size="small"
            current={1}
            pageSize={10}
            total={100}
            showTotalTxt={false}
            showQuickJumper={false}
            showSizeChanger={false}
          />

---

🧩 Props

📚Pagination 组件 Props

名称	类型	默认值	描述
onChange	(page: number, pageSize: number) => void	() => {}	页码变化时触发的回调函数
onShowSizeChange	(current: number, pageSize: number) => void	() => {}	页大小变化时触发的回调函数
size	'small' \ 'default' \ 'large'	'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	是否显示总条数文本
simpleInputMode	boolean	false	是否显示简洁模式下的 input
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 回调即可。