Pagination分页（antd-design组件库）展示所有配置选项和onChange的作用

喜欢ヅ旅行 2023-10-12 12:39 5阅读 0赞

## **1.****Pagination分页** ##

采用分页的形式分隔长列表，每次只加载一个页面。

## **2.****何时使用** ##

·当加载/渲染所有数据将花费很多时间时；

·可切换页码浏览数据。

组件代码来自： [分页 Pagination - Ant Design][Pagination - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【react项目+antd组件-demo:hello-world [react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [分页 Pagination - Ant Design][Pagination - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

## **4.****本地验证Pagination的所有配置选项。** ##

复制下图所示代码，了解Pagination的所有配置选项。

![952c2bfb6c944c03a2c78f04251f36e0.png][]

## **5.****感受一下size的作用** ##

**在上一步的基础上复制一个<Pagination** **…** **/>，**

**同时用<div>** **<****/****div>将两个<Pagination** **…** **/>包裹住。**

**在两个<Pagination** **…** **/>中分别增加一个size="small"和size="default"**

**最终****App2.js**中的全部代码如下：

import {Pagination} from 'antd';
    
    const App = () => (
        <div>
            <Pagination
                size="small"
                total={85}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `Total ${total} items`}
            />
    
            <Pagination
                size="default"
                total={85}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `Total ${total} items`}
            />
        </div>
    );
    export default App;

效果图如下：

![c34b336953bd4e27a0edd3311017ece2.png][]

## **6.****感受一下pageSize和current的作用** ##

**在上一步的基础上，复制下述代码到第一个<Pagination** **…** **/>中**

**pageSize=\{50\} // 每页条数**

**current=\{2\} // 当前页数**

**最终****App2.js**中的全部代码如下：

import {Pagination} from 'antd';
    
    const App = () => (
        <div>
            <Pagination
                size="small"
                total={85}
                pageSize={50}   // 每页条数
                current={2} // 当前页数
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `Total ${total} items`}
            />
    
            <Pagination
                size="default"
                total={85}
                showSizeChanger
                showQuickJumper
                showTotal={(total) => `Total ${total} items`}
            />
        </div>
    );
    export default App;

效果图如下：

![7e7b75364c9641c883283edc764ebcdc.png][]

##  ##

## **7.****感受一下onChange的作用** ##

**在****4****的基础上增加一个**

**onChange=\{(page, pageSize) => \{  
console.log(page, pageSize)  
\}\}**

**最终****App2.js**中的全部代码如下：

import {Pagination} from 'antd';
    
    const App = () => (
        <Pagination
            total={85}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `Total ${total} items`}
            onChange={(page, pageSize) => {
                console.log(page, pageSize)
            }}
        />
    );
    export default App;

**效果图如下：点击页数或选择每页显示多少条，可以在****F12****控制台里可以看到当前页码和每页显示的条数**

![40205fbbf5a040b5a6b250065582623f.png][]

本文仅介绍了组件Pagination的部分内容，更多内容请参阅官方文档： [分页 Pagination - Ant Design][Pagination - Ant Design]

[Pagination - Ant Design]: https://ant.design/components/pagination-cn#components-form-demo-basic
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[952c2bfb6c944c03a2c78f04251f36e0.png]: https://img-blog.csdnimg.cn/952c2bfb6c944c03a2c78f04251f36e0.png
[c34b336953bd4e27a0edd3311017ece2.png]: https://img-blog.csdnimg.cn/c34b336953bd4e27a0edd3311017ece2.png
[7e7b75364c9641c883283edc764ebcdc.png]: https://img-blog.csdnimg.cn/7e7b75364c9641c883283edc764ebcdc.png
[40205fbbf5a040b5a6b250065582623f.png]: https://img-blog.csdnimg.cn/40205fbbf5a040b5a6b250065582623f.png