mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
feat: add showTotal
for Pagination
This commit is contained in:
parent
d62c87d036
commit
cdbac65dbc
@ -9,9 +9,15 @@
|
|||||||
````jsx
|
````jsx
|
||||||
import { Pagination } from 'antd';
|
import { Pagination } from 'antd';
|
||||||
|
|
||||||
|
function showTotal(total) {
|
||||||
|
return `共 ${total} 条`;
|
||||||
|
}
|
||||||
|
|
||||||
ReactDOM.render(<div>
|
ReactDOM.render(<div>
|
||||||
<Pagination size="small" total={50} />
|
<Pagination size="small" total={50} />
|
||||||
<br />
|
<br />
|
||||||
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
|
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
|
||||||
|
<br />
|
||||||
|
<Pagination size="small" total={50} showTotal={showTotal} />
|
||||||
</div>, mountNode);
|
</div>, mountNode);
|
||||||
````
|
````
|
||||||
|
24
components/pagination/demo/total.md
Normal file
24
components/pagination/demo/total.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# 总数
|
||||||
|
|
||||||
|
- order: 9
|
||||||
|
|
||||||
|
通过设置 `showTotal` 展示总共有多少数据。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
````jsx
|
||||||
|
import { Pagination, Select } from 'antd';
|
||||||
|
|
||||||
|
function showTotal(total) {
|
||||||
|
return `共 ${total} 条`;
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<Pagination
|
||||||
|
selectComponentClass={Select}
|
||||||
|
total={80}
|
||||||
|
showTotal={showTotal}
|
||||||
|
pageSize={20} defaultCurrent={1} />,
|
||||||
|
mountNode
|
||||||
|
);
|
||||||
|
````
|
@ -32,3 +32,4 @@
|
|||||||
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
|
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
|
||||||
| size | 当为「small」时,是小尺寸分页 | String | "" |
|
| size | 当为「small」时,是小尺寸分页 | String | "" |
|
||||||
| simple | 当添加该属性时,显示为简单分页 | Object | 无 |
|
| simple | 当添加该属性时,显示为简单分页 | Object | 无 |
|
||||||
|
| showTotal | 用于显示总共有多少条数据 | Function | 无 |
|
||||||
|
@ -13,6 +13,13 @@
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-total-text {
|
||||||
|
float: left;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
@ -232,6 +239,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.@{pagination-prefix-cls} {
|
.@{pagination-prefix-cls} {
|
||||||
|
&.mini &-total-text {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
&.mini &-item {
|
&.mini &-item {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
Loading…
Reference in New Issue
Block a user