react使用antd框架分页的封装处理

后端用的是express+mongdb，前端用的是antd的Pagination组件，详细参数可以看官方文档 介绍的很详细

后端接口操作

分页没有进行封装，后面有时间搞一下，这里可以做个参考

router.get('/api/user/list', async (req, res) => {
  let pageSize = parseInt(req.query.pageSize) ? parseInt(req.query.pageSize) : 5// 当前页展示数量 如果不给定默认5条
  let currentPage = parseInt(req.query.currentPage) ? parseInt(req.query.currentPage) : 1 // 当前页
  let skip = (pageSize * (currentPage - 1)) // 跳过的数据数量
  let totalCount = (await User.find()).length // 数据总数
  const data = await User.aggregate([
    {
      $lookup: {
        from: 'roles',
        localField: 'roleId',
        foreignField: '_id',
        as: 'role'
      }
    }
  ]).skip(skip).limit(pageSize)
  res.json({
    code: CODE_SUCCESS,
    msg: '获取用户列表成功',
    data: {
      data,
      currentPage: currentPage, // 当前页数
      pageSize: pageSize, // 每页条数
      totalCount: totalCount// 总数据
    },
  })
})

具体操作流程

• 新增一个分页的封装组件
• 引入组件，使用通信操作返回的数据

下面是全部代码

import { ConfigProvider, Pagination } from 'antd'
import React, { useEffect, useState } from 'react'
import zhCN from 'antd/es/locale/zh_CN';
const MyPagination = (props: any) => {
  // 分页总数
  const [total, setTotal] = useState(0)
  // 当前第几页
  const [currentPage, setCurrentPage] = useState(0)
  // 每页显示条数
  const [pageSize, setPageSize] = useState(0)
  useEffect(() => {
    setTotal(props.total)
    setCurrentPage(props.currentPage)
    setPageSize(props.pageSize)
  }, [props])
  const onChangePage = (page: any, pageSize: any) => {
    // 将切换的页码参数传递过去
    props.onChange(page, pageSize)
  }
  return (
    <div>
      {/* 中文语言包 */}
      < ConfigProvider locale={zhCN} >
        <Pagination
          style={{ marginTop: "10px" }}
          current={currentPage} // 当前页
          pageSize={pageSize} // 每页条数
          total={total} // 数据总数
          pageSizeOptions={[5, 10, 50, 100]} // 每页显示多少条
          onChange={onChangePage} // 监听pageSize回调
          showSizeChanger // 展示 pageSize 切换器
          showQuickJumper // 快速跳转至某页
          showTotal={total => `共有 ${total} 条数据`} // 展示页码
        />
      </ConfigProvider >
    </div>
  )
}
export default MyPagination

数据页面使用的Table组件，先禁用自带的分页

 <Table
    columns={columns}
    dataSource={list}
    rowKey={((item: any) => { return (item._id + Date.now()) })}
    pagination={false} // 禁用分页
	/>

引入封装好的分页组件

 <MyPagination
    pageSize={pageSize}
    currentPage={currentPage}
    total={total}
    onChange={onChangePage}>
  />

这里是将后端接收过来的数据中的分页信息进行状态的保存

• 通过父传子的方式将分页信息和方法传递过去
• 在分页组件中通过props使用useEffect()进行接收参数和回调

  useEffect(() => {
    setTotal(props.total)
    setCurrentPage(props.currentPage)
    setPageSize(props.pageSize)
  }, [props])

在分页组件中操作回调函数方法并将分页组件监听到的页码传递到数据组件(父组件)中

  const onChangePage = (page: any, pageSize: any) => {
    // 将切换的页码参数传递过去
    props.onChange(page, pageSize)
  }

然后在数据组件中通过回调重新将页码赋值并再次传递给分页组件中，这里拿到的数据也可以通过解构重新保存到状态中

  // 跳转页数据显示
  const onChangePage = (page: any, pageSize: any) => {
    console.log("page", page, 'pageSize', pageSize);
    // 重新调用接口将参数传递过去
    props.BlogActions.asyncUserListAction(page, pageSize).then((res: any) => {
     // console.log("返回的数据：", res.data);
      let list=res.data.data
      setList(list)
      // 切换行
      setCurrentPage(page)
      // 根据页面数据显示页码
      setPageSize(pageSize)
    })
  }

网上的教程总感觉云里雾里的，还是决定自己写一个

最终效果展示：