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()
    })
}),