ant design配合laravel实现分页功能

无特殊情况下，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}/>