antd 分页

以你之姓@ 2022-01-30 02:43 197阅读 0赞

1，效果图如下

![20190517174533735.png][]

2，代码如下

import React, { PureComponent } from 'react';
    import { findDOMNode } from 'react-dom';
    import moment from 'moment';
    import { Link } from 'react-router-dom';
    import { connect } from 'dva';
    import ReactDOM from 'react-dom';
    import {Row,Col,Table,Radio,Input,Form,Button,Icon,DatePicker,Select,Modal,Popconfirm,
      Checkbox,message,Tag,TreeSelect, Menu, Dropdown,Tree, notification, Alert, Upload, Popover, Pagination,
    } from 'antd';
    import * as XLSX from 'xlsx';
    
    
    import styles from './studentsList.less';
    
    const FormItem = Form.Item;
    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;
    const SelectOption = Select.Option;
    const { Search, TextArea } = Input;
    const dateFormat = 'YYYY/MM/DD';
    const treeData = [{}];
    
    @Form.create()
    class StudentsList extends PureComponent {
    
    // 回调函数,下一页
      onchange = (page, pageSize) => {
        const { dispatch, form } = this.props;
        const query = this.props.query;
        const pageQuery=this.state.pageQuery;
        //console.log(pageQuery)
        form.validateFields((err, values) => {
          if (!err) {
            dispatch({
              type: 'students/fetch',
              payload: { page: page, limit: pageSize, query ,name:pageQuery},
            });
            this.setState({
              backPage:page,
            })
    
          }
        });
      };
    
      
    // 回调函数,每页显示多少条
      onShowSizeChange =(page, pageSize)=> {
        // 将当前改变的每页条数存到state中
        this.setState({
          pageSize: pageSize,
        });
        // 向后台请求
        const { dispatch, form  } = this.props;
        const params = {
          page: page,
          limit: pageSize,
        };
    
        form.validateFields((err, values) => {
          if (!err) {
            dispatch({
              type: 'students/fetch',
              payload: params,
            });
          }
        });
      }
      
    
      render() {
        // 表格数据的总条数
        const totals = this.props.total;
        const studentsList = this.props.studentsList;
        const students = JSON.stringify(studentsDetails) !== '[]' ? studentsDetails.students : [];
        const modalVisible = this.props.modalVisible;
        const { dispatch } = this.props;
       
       
        return (
          <div className={styles.listback}>
    
            <div>
              <Table
                columns={columns}
                dataSource={studentsList}
                rowKey={record => record.id}
                pagination={false}
                rowSelection={rowSelection}
                onChange={this.handleChange}
              />
              <Pagination
                showSizeChanger
                onShowSizeChange={this.onShowSizeChange}
                onChange={this.onchange}
                defaultCurrent={1}
                current={typeof page == 'undefined' ? 1 : page}
                total={totals}
                showQuickJumper={false}
                style={
       {marginTop:"20px",float:"right"}}
              />
              <span style={
       {marginTop:"25px",float:"right",marginRight: "10px"}}>共{totals}条</span>
            </div>
          </div>
        );
      }
    }
    function mapStateToProps(state) {
      return { ...state.students };
    }
    export default connect(mapStateToProps)(StudentsList);

[20190517174533735.png]: /images/20220130/ecbdc02044d94454bb8542933d40da5e.png