@uiw/react-pagination

Pagination 分页

当数据量较多时，使用分页可以快速进行数据切换，每次只加载一个页面。

import { Pagination } from 'uiw';
// or
import Pagination from '@uiw/react-pagination';

基本用法

import React from 'react';
import { Pagination, Divider } from 'uiw';


const Demo = () => {
  const [pageObj, setPageObj] = React.useState({
    current: 2,
    pageSize: 10
  });
  return (
    <div>
      <Pagination
        current={pageObj.current}
        pageSize={pageObj.pageSize}
        total={30}
        divider
        pageSizeOptions={[5, 10, 20, 30]}
        onShowSizeChange={(current, pageSize) => setPageObj({
          current: current,
          pageSize: pageSize
        })}
      />
      <Divider />
      <Pagination current={2} pageSize={10} total={38} divider />
      <Divider />
      <Pagination current={1} pageSize={5} total={249} pageSizeOptions={[5, 10, 20, 30]} />
      <Divider />
      <Pagination current={1} alignment="center" pageSize={10} total={50} />
      <Divider />
      <Pagination current={1} pageSize={10} total={60} divider />
      <Divider />
      <Pagination current={1} pageSize={10} total={70} divider />
    </div>
  )
}

export default Demo

迷你分页

import React from 'react';
import { Pagination, Divider } from 'uiw';

function Demo() {
  return <div>
    <Pagination size="small" current={1} pageSize={5} pageSizeOptions={[5, 10, 20, 30]} total={249} />
    <Divider />
    <Pagination size="small" current={1} pageSize={10} total={50} />
  </div>
}
export default Demo

对齐

目前有三种对齐方式 左边(left)、中间(center)、右边(right)。

import React from 'react';
import { Pagination, Divider } from 'uiw';

function Demo() {
  return <div>
    <Pagination
      current={5}
      total={250}
      onChange={(pageNumber) => { 
        console.log(`pageNumber:${pageNumber}`)
      }}
    />
    <Divider />
    <Pagination
      current={1}
      alignment="center"
      total={250}
      onChange={(pageNumber) => { 
        console.log(`pageNumber:${pageNumber}`)
      }}
    />
    <Divider />
    <Pagination
      current={25}
      alignment="right"
      total={250}
      onChange={(pageNumber) => { 
        console.log(`pageNumber:${pageNumber}`)
      }}
    />
  </div>
}

export default Demo

Props

参数	说明	类型	默认值
current	当前页数，选中的页数	Number	1
total	数据总数	Number	0
pageSize	每页条数	Number	10
pageSizeOptions	指定每页可以显示多少条	Number[]	-
divider	页码之间是否间隔	Boolean	-
size	当为 small 时，是小尺寸分页	Enum{small, default}	-
alignment	对齐	Enum{left, center, right}	left
onChange	页码改变的回调，返回改变后的页码	Function(current, total, pageSize)	-
onShowSizeChange	pageSize 变化的回调	Function(current, pageSize)	-