antd表格显示分页怎么取消_react antd分页后，表格筛选后不能触发重新分页

如图，参照官网表格demo，为表格添加分页的total(图一)，当按Age为32进行筛选后，分页没进行刷新，实际筛选出来的应该是7条而不是16条(图二)，如果把表格的pagination属性去掉使用antd默认值，筛选后的结果会自动分页(图三)

需要自定义表格的分页功能，该如何修改筛选后改变的数据来进行分页？筛选动作是在onFilter函数完成的，但是无法在这里进行分页数据的重新设置。

代码url ：antd 分页后，表格筛选不能自动触发重新分页

import React from 'react';

import ReactDOM from 'react-dom';

import 'antd/dist/antd.css';

import './index.css';

import { Table, Input, Button, Icon } from 'antd';

import Highlighter from 'react-highlight-words';

const data = [

{

key: '1',

name: 'John Brown',

age: 32,

address: 'New York No. 1 Lake Park',

},

{

key: '2',

name: 'Joe Black',

age: 42,

address: 'London No. 1 Lake Park',

},

{

key: '3',

name: 'Jim Green',

age: 32,

address: 'Sidney No. 1 Lake Park',

},

{

key: '4',

name: 'Jim Red',

age: 32,

address: 'London No. 2 Lake Park',

},

{

key: '5',

name: 'John Brown',

age: 32,

address: 'New York No. 1 Lake Park',

},

{

key: '6',

name: 'Joe Black',

age: 42,

address: 'London No. 1 Lake Park',

},

{

key: '7',

name: 'Jim Green',

age: 32,

address: 'Sidney No. 1 Lake Park',

},

{

key: '8',

name: 'Jim Red',

age: 32,

address: 'London No. 2 Lake Park',

},

{

key: '9',

name: 'John Brown',

age: 32,

address: 'New York No. 1 Lake Park',

},

{

key: '10',

name: 'Joe Black',

age: 42,

address: 'London No. 1 Lake Park',

},

{

key: '11',

name: 'Jim Green',

age: 31,

address: 'Sidney No. 1 Lake Park',

},

{

key: '12',

name: 'Jim Red',

age: 31,

address: 'London No. 2 Lake Park',

},

{

key: '13',

name: 'John Brown',

age: 31,

address: 'New York No. 1 Lake Park',

},

{

key: '14',

name: 'Joe Black',

age: 42,

address: 'London No. 1 Lake Park',

},

{

key: '15',

name: 'Jim Green',

age: 31,

address: 'Sidney No. 1 Lake Park',

},

{

key: '16',

name: 'Jim Red',

age: 31,

address: 'London No. 2 Lake Park',

},

];

class App extends React.Component {

state = {

searchText: '',

data: [],

pagination: {}

};

componentDidMount() {

const pager = { ...this.state.pagination };

pager.total = data.length;

pager.pageSize = 5;

pager.showTotal= total => `总共 ${total} 条`;

pager.showQuickJumper = 'showQuickJumper';

this.setState({

'data':data,

pagination:pager

});

}

handleTableChange = (pagination) => {

const pager = { ...this.state.pagination };

pager.current = pagination.current;

this.setState({

pagination: pager,

});

};

getColumnSearchProps = dataIndex => ({

filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (

ref={node => {

this.searchInput = node;

}}

placeholder={`Search ${dataIndex}`}

value={selectedKeys[0]}

onChange={e => {

console.log(e.target.value);

return setSelectedKeys(e.target.value ? [e.target.value] : [])

}}

onPressEnter={() => this.handleSearch(selectedKeys, confirm)}

style={{ width: 188, marginBottom: 8, display: 'block' }}

/>

type="primary"

onClick={() => this.handleSearch(selectedKeys, confirm)}

icon="search"

size="small"

style={{ width: 90, marginRight: 8 }}

>

Search

this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>

Reset

),

filterIcon: filtered => (

),

onFilter: (value, record) =>{

return record[dataIndex]

.toString()

.toLowerCase()

.includes(value.toLowerCase())

}

,

onFilterDropdownVisibleChange: visible => {

if (visible) {

setTimeout(() => this.searchInput.select());

}

},

render: text => (

highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}

searchWords={[this.state.searchText]}

autoEscape

textToHighlight={text.toString()}

/>

),

});

handleSearch = (selectedKeys, confirm) => {

confirm();

this.setState({ searchText: selectedKeys[0] });

};

handleReset = clearFilters => {

clearFilters();

this.setState({ searchText: '' });

};

render() {

const columns = [

{

title: 'Name',

dataIndex: 'name',

key: 'name',

width: '30%',

...this.getColumnSearchProps('name'),

},

{

title: 'Age',

dataIndex: 'age',

key: 'age',

width: '20%',

...this.getColumnSearchProps('age'),

},

{

title: 'Address',

dataIndex: 'address',

key: 'address',

...this.getColumnSearchProps('address'),

},

];

return

columns={columns}

// dataSource={data}

dataSource={this.state.data}

pagination={this.state.pagination}

/>;

}

}

ReactDOM.render(, document.getElementById('container'));