ant design配合laravel实现分页功能

Song • 708次浏览 • 0个评论 • 2018-07-23 13:38:49

无特殊情况下,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}/>
提交评论
要回复文章请先登录注册
用户评论
  • 没有评论
    公告
    中国晚上好,随时随地分享前沿科技,好吃好玩,有趣有料的新鲜事;本站可以分享资源,技术,观点,态度;同时希望大家做一个文明的分享者!
    广告
    pytorch中文网