pagination.tsx 1.1 KB
import { Pagination } from 'antd';

interface paginationProps {
  [props: string]: any;
  onChange: Function;
}

const PaginationWrap = (props: paginationProps) => {
  const { pagination, changePagination, onChange, ...rest } = props;

  const { offset, limit = 10, total_count } = pagination;

  // 分页改变
  const onPaginationChange = (page: number, limit: number) => {
    changePagination({
      ...pagination,
      offset: (page - 1) * (limit || 10),
      limit: limit,
    });
    onChange({
      offset: (page - 1) * (limit || 10),
      limit: limit,
    });
  };

  return (
    <Pagination
      style={{ textAlign: 'right', marginTop: '16px' }}
      current={(offset && Math.floor(offset / limit) + 1) || 1}
      pageSize={limit ? limit : 10}
      total={total_count}
      showTotal={(total) => `共 ${total} 条`}
      showSizeChanger={false}
      onChange={(page: number, pageSize: number) => {
        onPaginationChange(page, pageSize);
      }}
      {...rest}
      // pageSizeOptions={['10', '25', '50', '100']}
    />
  );
};

export default PaginationWrap;