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>)