antd框架的表单的分页功能

  

 一般情况下，都是表格的分页需求。(获得页面的数据，需要的参数（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}}

　　/>