mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 03:29:39 +08:00
feat: add showTotal
for Pagination
This commit is contained in:
parent
d62c87d036
commit
cdbac65dbc
@ -9,9 +9,15 @@
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
function showTotal(total) {
|
||||
return `共 ${total} 条`;
|
||||
}
|
||||
|
||||
ReactDOM.render(<div>
|
||||
<Pagination size="small" total={50} />
|
||||
<br />
|
||||
<Pagination size="small" total={50} showSizeChanger showQuickJumper />
|
||||
<br />
|
||||
<Pagination size="small" total={50} showTotal={showTotal} />
|
||||
</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 |
|
||||
| size | 当为「small」时,是小尺寸分页 | String | "" |
|
||||
| simple | 当添加该属性时,显示为简单分页 | Object | 无 |
|
||||
| showTotal | 用于显示总共有多少条数据 | Function | 无 |
|
||||
|
@ -13,6 +13,13 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&-total-text {
|
||||
float: left;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
border-radius: @border-radius-base;
|
||||
@ -232,6 +239,10 @@
|
||||
}
|
||||
|
||||
.@{pagination-prefix-cls} {
|
||||
&.mini &-total-text {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&.mini &-item {
|
||||
border: 0;
|
||||
|
Loading…
Reference in New Issue
Block a user