阅读 2840

React+Antd Design实现分页

目的

前端实现分页,用户点击分页按钮,数据分页显示

思路

  • 引入Antd DesignPagination分页组件
  • 在构造函数中设置数据state
  • 使用其自带的onChange事件函数,当点击页面时,这个函数会默认自动将页面数作为参数传入
  • 使用onChange函数,操纵数据,截取数组的数据片段
  • 渲染函数, 监听数据变化,渲染不同的页面数据

步骤

  1. 引入Antd DesignPagination分页组件, 在构造函数中设置数据state,
import { Card, Pagination } from "antd";

export class App extends Component {
  constructor(props) {
    super(props);
    // 设置一个页面显示3个数据
    this.state = {
      minValue: 0,
      maxValue: 3
    };
  }
  
**********

复制代码
  1. 使用其自带的onChange事件
// 根据传入的页面值,计算并截取数组的部分数据,作为相应页面的数据,这里一个页面只显示3个数据
 handleChange = value => {
    if (value <= 1) {
      this.setState({
        minValue: 0,
        maxValue: 3
      });
    } else {
      this.setState({
        minValue: (value-1) * 3,
        maxValue: (value-1) * 3+ 3
      });
    }
  };

 render(){
    ********

     <Pagination
              defaultCurrent={1}  // 默认在第一个页面
              defaultPageSize={3} // 默认一个页面显示3个数据
              // 点击页面触发更新,点击时,默认传入页面值,例如第一页,值为1
              onChange={this.handleChange} 
              // 设置整个数据的总数量
              total={data.length}
            />
    *******
    }   
        
复制代码
  1. 根据state的值,渲染相应页面的数据,例如页面2,其数据的位置区间为3-6,
render(){
         {data &&
              data.length > 0 &&
              data.slice(this.state.minValue, this.state.maxValue).map(val => (
                <Card
                  title={val.title}
                  style={{ width: 300 }}
                >
                  <p>{val.value}</p>
                </Card>
          ))}
        }
          
复制代码

效果图

完整代码

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Card, Pagination } from "antd";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      minValue: 0,
      maxValue: 3
    };
  }
  handleChange = value => {
    if (value <= 1) {
      this.setState({
        minValue: 0,
        maxValue: 3
      });
    } else {
      this.setState({
        minValue: (value-1) * 3,
        maxValue: (value-1) * 3+ 3
      });
    }
  };
  render() {
    let data = [
      { title: "Card title1", value: "Card content1" },
      { title: "Card title2", value: "Card content2" },
      { title: "Card title3", value: "Card content3" },
      { title: "Card title4", value: "Card content4" },
      { title: "Card title5", value: "Card content5" },
      { title: "Card title6", value: "Card content6" },
      { title: "Card title7", value: "Card content7" },
      { title: "Card title8", value: "Card content8" },
      { title: "Card title9", value: "Card content9" },
      { title: "Card title10", value: "Card content10" },
      { title: "Card title11", value: "Card content11" },
      { title: "Card title12", value: "Card content12" },
      { title: "Card title13", value: "Card content13" },
      { title: "Card title14", value: "Card content14" },
      { title: "Card title15", value: "Card content15" }
    ];
    return (
      <div>
        {data &&
          data.length > 0 &&
          data.slice(this.state.minValue, this.state.maxValue).map(val => (
            <Card
              title={val.title}
              style={{ width: 300 }}
            >
              <p>{val.value}</p>
            </Card>
          ))}
        <Pagination
          defaultCurrent={1}
          defaultPageSize={3}
          onChange={this.handleChange}
          total={data.length}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
复制代码

更多信息

stack Overflow类似代码

Antd Design Pagination分页

文章分类
阅读
文章标签