Pagination分页
采用分页的形式分隔长列表,每次只加载一个页面。
何时使用#
- 当加载/渲染所有数据将花费很多时间时;
- 可切换页码浏览数据。
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
代码演示
API#
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
nz-pagination#
参数 | 说明 | 类型 | 默认值 | 全局配置 |
---|---|---|---|---|
[nzTotal] | 数据总数 | number | - | - |
[nzPageIndex] | 当前页数,可双向绑定 | number | 1 | - |
[nzPageSize] | 每页条数 ,可双向绑定 | number | 10 | - |
[nzDisabled] | 是否禁用 | boolean | false | - |
[nzShowQuickJumper] | 是否可以快速跳转至某页 | boolean | false | ✅ |
[nzShowSizeChanger] | 是否可以改变 nzPageSize | boolean | false | ✅ |
[nzSimple] | 当添加该属性时,显示为简单分页 | boolean | - | ✅ |
[nzSize] | 当为「small」时,是小尺寸分页 | 'small' | 'default' | 'default' | ✅ |
[nzResponsive] | 当 nzSize 未指定时,根据屏幕宽度自动调整尺寸 | boolean | false | - |
[nzPageSizeOptions] | 指定每页可以显示多少条 | number[] | [10, 20, 30, 40] | ✅ |
[nzItemRender] | 用于自定义页码的结构 | TemplateRef<{ $implicit: 'page' | 'prev' | 'next'| 'prev_5'| 'next_5', page: number }> | - | - |
[nzShowTotal] | 用于显示数据总量和当前数据范围,具体使用方式见代码演示部分 | TemplateRef<{ $implicit: number, range: [ number, number ] }> | - | - |
[nzHideOnSinglePage] | 只有一页时是否隐藏分页器 | boolean | false | - |
(nzPageIndexChange) | 页码改变的回调 | EventEmitter<number> | - | - |
(nzPageSizeChange) | 每页条数改变的回调 | EventEmitter<number> | - | - |