@uiw/react-pagination
TypeScript icon, indicating that this package has built-in type declarations

4.22.3 • Public • Published

Pagination 分页

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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

基本用法

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

export default function 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>
  )
}

迷你分页

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

export default 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>
  );
}

对齐

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

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

export default 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>
  );
}

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) -

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @uiw/react-pagination

    Weekly Downloads

    167

    Version

    4.22.3

    License

    MIT

    Unpacked Size

    37.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • uiwjs
    • wcjiang