Ant Design Table Pagination案例

Ant Design Table完整案例

包括表格，分頁，請求數據，頁面變動請求數據等…

組件包括 table，pagination

1. 代碼

import React from 'react';
import {Table} from 'antd';
import {getRecordList} from '../../api/recordApi';

export default class Record extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // 列表數據
            list: [],
            // 總條數
            total: 0,
            // 定義查詢參數
            query: {
                pageNumber: 1,
                pageSize: 10
            }
        }
    }

    componentDidMount() {
        this.getList()
    }

    getList() {
        // axios請求數據
        getRecordList(this.state.query).then(res => {
            // 請求成功，修改數據
            if (res.data.code === 1000) {
                this.setState({list: res.data.list, total: res.data.total});
            } else {
                console.log(res.data)
            }
        }).catch(err => {
            console.log(`${err}`)
        })
    }

    render() {
        // 定義表格列名
        const columns = [{
            title: '創建時間',
            dataIndex: 'createTime',
            key: 'createTime',
            render: text => <span>{text}</span>,
        }, {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '二維碼編號',
            dataIndex: 'qrCodeNumber',
            key: 'qrCodeNumber',
        }, {
            title: '備註',
            dataIndex: 'remark',
            key: 'remark',
        }];
        return (
            <Table
                rowKey="id"
                columns={columns}
                dataSource={this.state.list}
                // 表格擴展卡片
                expandedRowRender={data =>
                    <div>
                        <p>序號 {data.id}</p>
                        <p>創建時間 {data.createTime}</p>
                        <p>上傳圖片 </p>
                        <img style={{width: '10%'}} src={data.imgUrl}/>
                    </div>
                }
                // 添加分頁組件
                pagination={{
                    // 設置總條數
                    total: this.state.total,
                    // 設置頁碼可選項
                    pageSizeOptions: ["10", "20", "50"],
                    // 顯示總條數
                    showTotal: total => `共 ${total} 條`,
                    // 是否可以改變 pageSize
                    showSizeChanger: true,
                    // 改變頁碼時
                    onChange: ((page, pageSize) => {
                        this.setState({
                            query: {
                                pageNumber: page,
                                pageSize: pageSize
                            }
                        }, () => {
                            this.getList()
                        })
                    }),
                    // pageSize 變化的回調
                    onShowSizeChange: (page) => {
                        this.setState({
                            query: {
                                pageNumber: page
                            }
                        }, () => {
                            this.getList()
                        })
                    }
                }}
            />
        )
    }
}

2.表格效果

3.注意

在使用 pagination組件的onChange和onShowSizeChange方法時，如果需要使用this.setState({})先改變一些參數（如查詢條件），那麼一定要把請求放到this.setState({},function())中，如下:

這樣纔不會出現異步情況（請求已經發出，參數才改變）

// 改變頁碼時
onChange: ((page, pageSize) => {
    this.setState({
        query: {
            pageNumber: page,
            pageSize: pageSize
        }
    }, () => {
        this.getList()
    })
}),