一般情況下，都是表格的分頁需求。(獲得頁面的數據，需要的參數（itemname， mutant_gene ，nucleotide，pageNo，pageSize）)
// 在modal文件下
* eff_getSiteInformation ({ payload, }, { call, put, select }) {
const resp = yield call(getSiteInformation, payload)
if (isSucc(resp)) {
let SiteInformationList = resp.data.list
let pagination = {
current: resp.data.pageNum,
total: resp.data.total,
pageSize: payload.pageSize,
showTotal: (total) => `共${total}條記錄`
}
let idx = (pagination.current - 1) * pagination.pageSize + 1
for (let item of SiteInformationList) {
item.index = idx
idx++
}
yield put({type: 'update', payload: {SiteInformationList, pagination}})
}
}
// 另一個組件中（兄弟組件）通過modal中的searchJson來實現組件中的值，變為全局可用 （另外一些參數在另一個兄弟組件中：itemname， mutant_gene ，nucleotide）
this.props.form.validateFields((err, values) => {
if (err) {
return
}
let json = {
itemname: values.itemId,
mutant_gene: values.mutable,
nucleotide: values.change,
pageSize: 10,
pageNo: 1
}
this.props.dispatch({type: 'siteConfig/searchJson', payload: json})
this.props.dispatch({type: 'siteConfig/eff_getSiteInformation', payload: json})
})
// 在model中的searchJson
reducers: {
searchJson (state, {payload}) {
return { ...state, searchJson: payload }
}
}
// 在view文件下
// 頁碼改變的回調函數，需要傳參，這里因為一部分參數是另一個組件（兄弟組件）中的值，所以需要通過modal來進行值之間的通信
onPaginationChange = (searchObj) => {
let { pageNum, pageSize } = searchObj
let searchJson = this.props.siteConfig.searchJson
searchJson.pageNo = pageNum
searchJson.pageSize = pageSize
this.props.dispatch({type: 'siteConfig/searchJson', payload: searchJson})
this.props.dispatch({type: 'siteConfig/eff_getSiteInformation', payload: searchJson})
}
//分頁的一些配置 （只知道一些參數：pageNo，pageSize）
const pagination = {
onChange: (pageNum, pageSize) => this.onPaginationChange({ pageNum, pageSize }), // 頁碼改變的回調，參數是改變后的頁碼及每頁條數
onShowSizeChange: (pageNum, pageSize) => this.onPaginationChange({pageNum, pageSize}), // pageSize 變化的回調
...this.props.siteConfig.pagination,
showSizeChanger: true,
showQuickJumper: true,
}
<Table
pagination={pagination} //分頁功能
dataSource={dataSource}
columns={this.getTableColumns}
rowSelection={rowSelection}
scroll = {{x: 1300}}
/>