ant design配合laravel实现分页功能

Song1868 次浏览0个评论2018年07月23日

无特殊情况下,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 columns={columns} dataSource={data} />

若需要单独设置每页的页数,可以设置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}/>

提交评论

请登录后评论

用户评论

    当前暂无评价,快来发表您的观点吧...

更多相关好文

    当前暂无更多相关好文推荐...