关于 ant Design的分页组件的应用

无特殊情况下，Table组件会自动分页，默认每页10条数据。

data:显示的数据

column:为显示的table表格样式

每一列都有一个dateIndex;默认为数据列中相对应的属性值。

例如：const columns = [

{ title: 'Name',

dataIndex: 'name',

render: text => <a href="#">{text}</a>,

{ title: 'Age', dataIndex: 'age',},

{ title: 'Address', dataIndex: 'address',}

];

const data = [

{ key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park',},

{ key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park',},

{ key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park',},

];

若需要单独设置每页的页数，可以设置Table的pagination属性，通常有两种获取数据的方式：

 一、后台获取
total:为数据的总条数；
defaultCurrent: 为当前默认的页数 page当前页为变量；
pageSize:每页的条数，size页条数为变量；
onShowSizeChange:点击选择每页条数的按钮，获取当前页和当前页的条数；
onChange: 点击当前页数，获取当前页和当前页的条数；

onClick(current, pageSize) {
    this.setState({page:current,size:pageSize});
    this.loadData(current,pageSize);
}
//根据当前页和当前条数，获取相应的数据值，确定重新设置了this.state,保证render能够重新进行渲染。
//loadData()获取数据的函数。
let {page, size, total, items} = this.state;
let pagination = {
    total: total,
    defaultCurrent: page,
    pageSize: size,
    showSizeChanger: true,
    onShowSizeChange: (current, pageSize) => {
        this.onClick(current, pageSize)
    },
    onChange:(current, pageSize) => {
        this.onClick(current, pageSize)
    },
}
//二、前端获取

let pagination = {    
    total: total,
    defaultCurrent: page,
    pageSize: size,
    showSizeChanger: true,
    onShowSizeChange: (current, pageSize) => { 
           },}

<Table bordered columns={columns} dataSource={data} loading=true pagination={pagination}/>

关于 ant Design的分页组件的应用

悦读