ant.design中，数据改变时，怎么让分页重置到第一页？

Question

问题描述

RT:最近在使用antd的时候，页面中有一个表格，下面是自带的分页，当点击一个按钮的时候，表格的数据更新，但是分页的按钮并不会回到第一页，还停留在之前的位置

如下图：

点击按钮，数据更新，这个页码应该重置到1页。

相同的问题还有输入框中的数据，也不会重置。

补充：

点击按钮后，使用的是react-router v4 url是会改变的。

有什么好的办法的？
感谢。

补充--------------------------------------------------------------------

代码其实也什么看的。就那antd文档中的例子来说吧。

import React from 'react'
import ReactDOM from 'react-dom';
import { Table, Icon, Divider } from 'antd';

class MyTable extends React.Component {
    constructor(){
        super()
        this.state={
            tabledata:[{
                  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',
                }]
        }
    }

    onClick(e){
        this.setState({
            tabledata:[{
                  key: '1',
                  name: 'Jaaaaaaa',
                  age: 32,
                  address: 'New York No. 1 Lake Park',
                }, {
                  key: '2',
                  name: 'Jiaaaaaa',
                  age: 42,
                  address: 'London No. 1 Lake Park',
                }, {
                  key: '3',
                  name: 'Jaaaaaaaaa',
                  age: 32,
                  address: 'Sidney No. 1 Lake Park',
                }],
        })
    }
    render(){
        const columns = [{
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: text => <a href="javascript:;">{text}</a>,
        }, {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        }, {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        }];
        return(
            <div>
                <input type = 'button'value='切换数据' onClick={this.onClick.bind(this)}/>
                <Table columns={columns} dataSource={this.state.tabledata} pagination={{defaultPageSize:"1"}}/>
            </div>
            )
    }
}

ReactDOM.render(<MyTable />, document.getElementById('root'));

很简单的例子，页面中有一个表格和一个按钮，点击按钮，更改表格中的数据。

问题来了：
我点击到第二页，如图

再点击切换数据的按钮，切换数据后：

数据是被切换了，但是 分页的这个还停留在第二页。

终极问题：

这么说吧，意思是react中，当我们进行一次操作后，这么让组件恢复到最初始的状态。
如果可以，使用上面的例子分析一下。
感谢
累。

Answer 1

谢邀，table 支持 pagination 接口。你需要在 state 中添加 pagination 属性并加以控制，然后传给 table props。更新数据后将 pagination.current 归 1 。这个文档描述确实有些含糊，当时也是翻了几遍才明白。

Answer 2

你不把代码贴出来，我们脑补来帮你改吗

Answer 3

<a-table @change="tableHandleChange" :columns="columns" :data-source="data" :pagination="pagination" :row-selection="rowSelection" rowKey="id">
</a-table>

//不生效 == 直接修改，重置分页不生效，可能由于Vue不能动态的检测到对象属性变化所致
this.pagination.current = responseData.result.current

//生效 === 一句代码就可以搞定指定分页
this.$set(this.pagination, "current", responseData.result.current);

Answer 4

碰到相同的问题，请问您如何解决的