React 分页,搜索分页

下载 Ant Design

npm install antd --save

引入

import { Pagination} from "antd";
  state = {
    list: [],
    currentPage: 1,
    pageSize: 5,
    total: 0,
    search: "",
  };

页面中使用
current={currentPage}为设置的默认页数, pageSize={pageSize}为设置的条数
total为总页数

    <Pagination
            current={currentPage}
            pageSize={pageSize}
            className="pga"
            total={total}
            showSizeChanger
            showQuickJumper
            onChange={this.handlePageChange}
          />

给onChange 的handlePageChange 的分页逻辑

  handlePageChange = (page, pageSize) => {
    const { search } = this.state;  //search为state设置的搜索框的值
    this.setState(
      {
        currentPage: page,
        pageSize: pageSize,
      },
      () => {
        if (search) {
          TeacherSearch({ name: search, page: page, pagelimit: pageSize }) //搜索调用的接口
            .then((res) => {
              this.setState({
                list: res.data.data || [],
                total: res.data.pagecount || 0,
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.fetchData();
        }
      }
    );
  };
//获取到列表全部数据  
fetchData = () => {
    const { currentPage, pageSize, search } = this.state;
    let params = { page: currentPage, pagelimit: pageSize };
    if (search) {
      params.name = search;
    }
    TeacherList(params)
      .then((res) => {
        this.setState({
          list: res.data.data,
          total: res.data.pagecount,
        });
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
//搜索分页
  onSearch = (e) => {
    const { name, value } = e.target;
    const { currentPage, pageSize } = this.state;
    this.setState({     //获取到搜索框的值
      [name]: value,
    });
    if (value === "") {  //搜索框为空返回全部的数据
      this.fetchData();
    } else {
      TeacherSearch({ name: value, page: currentPage, pagelimit: pageSize })
        .then((res) => {
          this.setState({
            list: res.data.data || [],
            total: res.data.pagecount || 0,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现React分页功能,可以遵循以下步骤: 1. 安装需要的依赖包,例如 react-paginate 2. 在组件中定义 state,包括当前页码、每页显示的数据量等 3. 创建分页组件,可以使用 react-paginate 提供的组件,或者自己编写 4. 在组件中获取需要分页的数据,例如从 API 中获取数据 5. 根据当前页码和每页显示的数据量计算需要显示的数据 6. 在分页组件中添加事件处理函数,例如点击页码按钮时更新当前页码 state 7. 将计算后的数据渲染到页面上,可以使用 map 函数遍历数组并生成对应的元素 8. 根据需要添加样式,例如设置按钮样式、高亮当前页码等 下面是一个简单的示例代码: ```javascript import React, { useState, useEffect } from 'react'; import ReactPaginate from 'react-paginate'; function App() { const [data, setData] = useState([]); const [currentPage, setCurrentPage] = useState(0); const [perPage, setPerPage] = useState(10); useEffect(() => { fetchData(); }, []); const fetchData = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const json = await response.json(); setData(json); }; const handlePageClick = ({ selected }) => { setCurrentPage(selected); }; const offset = currentPage * perPage; const pageCount = Math.ceil(data.length / perPage); return ( <div> {data.slice(offset, offset + perPage).map((item) => ( <div key={item.id}>{item.title}</div> ))} <ReactPaginate previousLabel={'previous'} nextLabel={'next'} breakLabel={'...'} pageCount={pageCount} onPageChange={handlePageClick} containerClassName={'pagination'} activeClassName={'active'} /> </div> ); } export default App; ``` 在这个示例代码中,我们使用 useEffect 钩子函数在组件挂载后获取数据,然后使用 ReactPaginate 组件创建分页组件,并且在 handlePageClick 函数中更新当前页码 state。最后,我们使用 slice 函数和 map 函数计算需要显示的数据,并将其渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值