Merge pull request #1077 from ant-design/feat-pagination

feat: add `showTotal` for Pagination

components/pagination/demo/mini.md

@@ -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);
 ````

components/pagination/demo/total.md

@@ -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
+);
+````

components/pagination/index.md

@@ -32,3 +32,4 @@
 | showQuickJumper  | 是否可以快速跳转至某页             | Bool          | false                    |
 | size             | 当为「small」时，是小尺寸分页      | String        | ""                       |
 | simple           | 当添加该属性时，显示为简单分页     | Object        | 无                       |
+| showTotal        | 用于显示总共有多少条数据          | Function      | 无                       |

style/components/pagination.less

@@ -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;