antd 分页

最新推荐文章于 2025-06-04 16:22:03 发布

原创最新推荐文章于 2025-06-04 16:22:03 发布 · 4.2k 阅读

5 ·

CC 4.0 BY-SA版权

antd 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用Ant Design实现分页功能的过程，包括展示的效果图和详细的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，效果图如下

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