react antd分页后，表格筛选后不能触发重新分页

Question

如图，参照官网表格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 }) => (
      <div style={{ padding: 8 }}>
        <Input
          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' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>{

      return record[dataIndex]
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase())
    }
      ,
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => this.searchInput.select());
      }
    },
    render: text => (
      <Highlighter
        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 <Table 
              columns={columns} 
              // dataSource={data} 
              dataSource={this.state.data}
              pagination={this.state.pagination}
            />;
  }
}

ReactDOM.render(<App />, document.getElementById('container'));
          

Answer 1

这种写法是远程加载数据的写法,可以看看官方的文档;
表格分页分两种情况,一种是后端分页的,一种是前端分页;
https://ant.design/components...

https://ant.design/components/table-cn/#pagination

Answer 2

  这是由于你自己写的分页，是通过改变表格里的数据来重新渲染的，所以每次筛选的结果都是分页之后当前页的筛选结果。
  问题还是出在了表格的datasource上了，我最近也在尝试使用前端分页的方式，后期想要做前端分页和后端分页结合，可以通过自定义筛选的方式实现，不过有些勉强。结果是可以的，但是想要实现指定筛选的话不可行，因为antd暴露的接口仅针对表格中有的数据，虽然有分页，但是其实你显示的每一页只有指定的几条数据而已。除非是一次把所有数据全都加载进去，这不科学。
  希望antd能给table的这个接口更多选择。