分页 ok

src/components/common/schema/Schema.jsx

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 
-import {Row, Col, Input, Icon, Button, Spin, Pagination, Modal} from 'antd';
+import {Button, Col, Icon, Modal, Pagination, Row, Spin} from 'antd';
 import './index.css';
 import {Mutation, Query} from "react-apollo";
 import gql from "graphql-tag";
-import {SHOW_SCHEMA, DELETE_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
+import {DELETE_SCHEMA, SHOW_SCHEMA, SHOW_TABLE, UPDATE_SCHEMA} from '../../gql'
 import Table from "./Table";
 
 const confirm = Modal.confirm;
@@ -17,6 +17,7 @@ class Schema extends Component {
             // default schemaID and schemaName
             schemaID: props.schemaID || props.location.state.schemaID,
             schemaName: props.schemaName || props.location.state.schemaName,
+            data: ''
         };
     }
 
@@ -36,11 +37,18 @@ class Schema extends Component {
         })
     };
 
+    showTablePagination = (page, pageSize, data) => {
+        this.setState({
+            data: data.slice((page-1)*pageSize, page*pageSize)
+        })
+    };
+
     componentWillReceiveProps(next) {
         this.setState({
             currentTable: next.location.state === undefined ? '' : next.location.state.create ? 'add' : '',
             schemaID: next.schemaID,
-            schemaName: next.schemaName
+            schemaName: next.schemaName,
+            data: ''
         });
     }
 
@@ -63,7 +71,6 @@ class Schema extends Component {
                         if (data.schema_by_id === null) data = [];
                         else data = JSON.parse(data.schema_by_id.schemaData);
 
-
                         return (
                             <div>
                                 {
@@ -98,21 +105,23 @@ class Schema extends Component {
                                             </div>
                                             <div>
                                                 {
-                                                    data.map(table => (
-                                                        <div key={table.name} className={'schema-table-list-content'}>
-                                                            <Row>
-                                                                <Col
-                                                                    span={10}
-                                                                    onClick={() => this.switchTable(table.name)}
-                                                                >
+                                                    this.state.data ?
+                                                        this.state.data.map(table => (
+                                                            <div key={table.name}
+                                                                 className={'schema-table-list-content'}>
+                                                                <Row>
+                                                                    <Col
+                                                                        span={10}
+                                                                        onClick={() => this.switchTable(table.name)}
+                                                                    >
                                                                 <span
                                                                     className={'schema-table-content'}>{table.name}</span>
-                                                                </Col>
-                                                                <Col span={10}>
+                                                                    </Col>
+                                                                    <Col span={10}>
                                                                 <span
                                                                     className={'schema-table-content'}>{table.remark}</span>
-                                                                </Col>
-                                                                <Col span={2} offset={2}>
+                                                                    </Col>
+                                                                    <Col span={2} offset={2}>
                                                                 <span className={'schema-table-content'}>
                                                                     <DeleteTableButton
                                                                         currentTable={table.name}
@@ -121,11 +130,41 @@ class Schema extends Component {
                                                                         userID={userID}
                                                                     />
                                                                 </span>
-                                                                </Col>
-                                                            </Row>
-                                                        </div>
+                                                                    </Col>
+                                                                </Row>
+                                                            </div>
+
+                                                        ))
+                                                        :
+                                                        data.slice(1, 15).map(table => (
+                                                            <div key={table.name}
+                                                                 className={'schema-table-list-content'}>
+                                                                <Row>
+                                                                    <Col
+                                                                        span={10}
+                                                                        onClick={() => this.switchTable(table.name)}
+                                                                    >
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.name}</span>
+                                                                    </Col>
+                                                                    <Col span={10}>
+                                                                <span
+                                                                    className={'schema-table-content'}>{table.remark}</span>
+                                                                    </Col>
+                                                                    <Col span={2} offset={2}>
+                                                                <span className={'schema-table-content'}>
+                                                                    <DeleteTableButton
+                                                                        currentTable={table.name}
+                                                                        currentTableIndex={data.findIndex(obj => obj.name === table.name)}
+                                                                        schemaID={this.state.schemaID}
+                                                                        userID={userID}
+                                                                    />
+                                                                </span>
+                                                                    </Col>
+                                                                </Row>
+                                                            </div>
 
-                                                    ))
+                                                        ))
                                                 }
                                             </div>
 
@@ -142,7 +181,16 @@ class Schema extends Component {
                                                     </Col>
                                                     <Col span={4} offset={16}>
                                                         <div className={'pagination'}>
-                                                            <Pagination simple defaultCurrent={2} total={50}/>
+                                                            <Pagination
+                                                                simple
+                                                                defaultCurrent={1}
+                                                                hideOnSinglePage={true}
+                                                                defaultPageSize={15}
+                                                                total={data.length}
+                                                                onChange={(page, pageSize) => {
+                                                                    this.showTablePagination(page, pageSize, data)
+                                                                }}
+                                                            />
                                                         </div>
                                                     </Col>
                                                 </Row>