Ant Design实现表格搜索、分页、多选处理

要实现如下所示的  切换分页，切换每页展示数据数目，输入跳转到某页，搜索可以获取表格中对应数据

 

1、条件是后端传过来的分页接口数据json结构是

{
  "code": 0,
  "msg": "success",
  "data": {
    "list": [
      {
        "id": 24,
        "test1": "test1",
        "test2": "test2"
      }
    ],
    "totalPage": 2,
    "currPage": 1,
    "totalSize": 12,
    "currSize": 10
  }
}

2、在model的state建立一个数组，通过effect异步请求将请求到的数据data保存到此数组中

3、写分页请求方法

在state中给search和多选框一个初始值

state = {
  search:'',
  selectedRows:[],
}

// 获取分页数据
fetchTableList({ currentPage = 1, pageSize = 10 } = {}) {
  const { dispatch } = this.props;
  dispatch({
    type:'apt/getOperandi',
    payload: {
      page: currentPage,
      limit: pageSize,
      search: this.state.search
    },
  });
}

4、改变分页和多选方法

// 多选

handleSelectRows = rows => {
  this.setState({
    selectedRows: rows,
  });
};
// 改变页数
handleStandardTableChange = (pagination, filtersArg, sorter) => {
  const { formValues } = this.state;
  const filters = Object.keys(filtersArg).reduce((obj, key) => {
    const newObj = { ...obj };
    newObj[key] = getValue(filtersArg[key]);
    return newObj;
  }, {});

  const params = {
    currentPage: pagination.current,
    pageSize: pagination.pageSize,
    ...formValues,
    ...filters,
  };
  if (sorter.field) {
    params.sorter = `${sorter.field}_${sorter.order}`;
  }
  this.fetchTableList(params);
};

5、搜索 、重置

    // 搜索输入框

 inputValue=(e)=>{
    const search = e.target.value.trim();
    this.setState({ search })
  }
  // 搜索
  handleSearch=()=>{
    const that = this;
    this.setState({
      page:1
    },()=>{
      that.fetchTableList()
    })

  }
  //重置
  resetSearch=()=>{
    const that = this;
    this.setState({
      search:'',
      page:1,
    })
    setTimeout(()=>{
      that.fetchTableList()
    },0)
  }

6、render中展示数据

const { selectedRows} = this.state;
const hasSelected = selectedRows.length>0;
const { apt: { operandi },} = this.props; // 获取model中定义的数组
const data = {
  list: operandi.list,   //得到其中的数据
  pagination: {
    current: operandi.currPage,  // 默认页数
    pageSize: operandi.currSize, // 默认每页条数
    showSizeChanger: true,        // 展示当前几页
    total: operandi.totalSize,   // 总条数
    pageSizeOptions: ['10','20', '30', '50', '100'],  // 分页类别
    showTotal: total => `共 ${total} 条`,
  },
};

// 搜索模块

const  Search =(
  <div className={styles.search}>
    <span>搜索。。。</span>
    <Input placeholder="搜索" value={this.state.search}  onChange={this.inputValue} />
    <div className={styles.btns}>
      <Button type="primary" onClick={this.handleSearch}>搜索</Button>
      <Button onClick={this.resetSearch} >重置</Button>
    </div>
  </div>
);

// 表格

const indexPage = (
  <PageHeaderWrapper>
    <div style={{background:'white',padding:'24px 32px'}}>
      <div style={{marginBottom:16}}>
        {Search}   // 搜索模块
        <div className={styles.btns}>
          <div className={styles.tableOpers}>
            <Button icon="plus" type="primary" onClick={this.openAdd}>
              添加
            </Button>
            {selectedRows.length > 0 && (   // 批量删除按钮通过多选框判别
              <span>
       <Button type="danger" onClick={this.delMulti}>批量删除</Button>
     </span>
            )}
          </div>
        </div>
      </div>
      <StandardTable  // 表格组件
        selectedRows={selectedRows}
        data={data}  
        rowKey="id"
        columns={columns}
        onSelectRow={this.handleSelectRows}
        onChange={this.handleStandardTableChange}
      />
    </div>
  </PageHeaderWrapper>)