详解antdpagination分页组件

一、基本介绍

antdpagination是Ant Design组件库中的一款分页组件。它的核心作用就是展示分页信息，并且用户可以点击上一页、下一页等控件来实现翻页。

在使用该组件的过程中，需要注意其props的使用方法和样式的调整。

二、props详解

1、current: 当前所在页数，默认值为1。

2、total: 数据总条数，默认值为0。

3、pageSize: 每页显示条数，默认值为10。

4、onChange: 页码改变的回调函数，参数为改变后的页码。

5、showSizeChanger: 是否展示 pageSize 切换器，默认值为false。

6、pageSizeOptions: 指定每页可以显示多少条，配合showSizeChanger使用，常用于快速跳转。

7、onShowSizeChange: pageSize 变化的回调函数。

8、showQuickJumper: 是否可以快速跳转至某页， 默认值为false。

9、showTotal: 用于显示数据总量和当前数据顺序，可以自定义模板。

三、代码示例

1、基础使用

  import React, { useState } from 'react';
  import { Pagination } from 'antd';

  function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
  }

  function BasicPagination() {
    return (
      
    );
  }

在这个示例中，我们设置了当前页码为1，该组件总共有50条数据，当页码改变时，回调函数onChange将会被触发。

2、结合antdtable的使用示例

  import React, { useState } from 'react';
  import { Table, Pagination } from 'antd';

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  const data = [
    {
      key: 1,
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    ...
  ];

  function TableWithPagination() {
    const [pagination, setPagination] = useState({
      current: 1,
      pageSize: 5,
    });

    const onTableChange = (pagination, filters, sorter) => {
      console.log('params', pagination, filters, sorter);
      setPagination(pagination);
    };

    return (
      <>
        
  
         {
            setPagination({ ...pagination, current: page });
          }}
        />
      
    );
  }

  

这个示例中我们将Pagination和Table组合使用，并且在Table的onChange回调中，将Table当前的pagination状态设置为Pagination的状态。

3、自定义分页展示

  import React, { useState } from 'react';
  import { Pagination } from 'antd';

  function itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return 上一页;
    }
    if (type === 'next') {
      return 下一页;
    }
    return originalElement;
  }

  function CustomPagination() {
    return (
      
    );
  }

在这个示例中，我们通过itemRender方法来实现自定义分页展示，当页码类型为prev或者next时，我们可以将其展示为自定义文案。

四、总结

以上就是对于antdpagination分页组件的详细介绍，从props入手，通过代码示例来演示如何使用该组件。在使用过程中，需要注意灵活使用组件的各种props，以及适时自定义组件的样式和展示方式。