分页表格轮询

爱上布洛格的鸭鸭

于 2023-04-19 23:50:58 发布

阅读量195

点赞数

分类专栏：前端文章标签：前端 react.js

本文链接：https://blog.csdn.net/smallpig_code/article/details/130256219

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

设置分页表格相关参数

  // 分页参数
  const [page, setPage] = useState(1); // 当前页
  const [count, setCount] = useState(0); // 数据总数
  const [loading, setLoading] = useState(false); // 请求数据loading
  const [dataSource, setDataSource] = useState<
    { id: number; message: string }[]
  >([]); // 数据

使用antd的table组件，并传入相关参数

    <Table
      rowKey="id"
      dataSource={dataSource}
      pagination={{
        current: page,
        total: count,
        pageSize: 8,
        onChange: onPageChange
      }}
      loading={loading}
      columns={[
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '信息',
          dataIndex: 'message',
          key: 'message',
          render: (_, record: any) => {
            return <>{`${record.id}-${_}`}</>;
          }
        }
      ]}
    />

封装请求方法，设置loadin及相关数据(其中fetchList为fetch请求)

// 封装请求方法，传入所需参数，在请求开始前/请求结束后设置loading
const serviceFn = useCallback(
  (pagination: { current?: number; pageSize?: number }) => {
    setLoading(true);
    return fetchList({
      page: {
        to: pagination.current || page,
        size: pagination.pageSize || 8
      }
    })
      .then(data => {
        // 设置数据
        setCount(data.dataCount);
        setDataSource(data.data);
      })
      .finally(() => {
        setLoading(false);
      });
  },
  [page]
);

使用定时器实现轮询

 // 定时器
 const timer = useRef<number>();

 // 使用定时器实现请求轮询，设置setInterval定时器前需要需要先清除已有的setInterval定时器
  const getList = useCallback(
    (params: { current?: number; pageSize?: number }) => {
      serviceFn(params);

      // 轮询
      clearInterval(timer.current);
      timer.current = window.setInterval(() => {
        serviceFn(params);
      }, 5000);
    },
    [serviceFn]
  );

初始化时发送请求，设置定时器

  // 初始化请求列表，组件写在清除定时器
  useEffect(() => {
    getList({});

    return () => {
      // 清除定时器
      clearInterval(timer.current);
    };
  }, []);

当table切换当前页时会触发onChange事件，定义onPageChange事件

  const onPageChange = useCallback(
    (current: number) => {
      getList({
        current
      });
      setPage(current);
    },
    [getList]
  );

完整代码

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Table } from 'antd';


const App = () => {
  // 定时器
  const timer = useRef<number>();
  // 分页参数
  const [page, setPage] = useState(1); // 当前页
  const [count, setCount] = useState(0); // 数据总数
  const [loading, setLoading] = useState(false); // 请求数据loading
  const [dataSource, setDataSource] = useState<
    { id: number; message: string }[]
  >([]); // 数据

  // 封装请求方法，传入所需参数，在请求开始前/请求结束后设置loading
  const serviceFn = useCallback(
    (pagination: { current?: number; pageSize?: number }) => {
      setLoading(true);
      return fetchList({
        page: {
          to: pagination.current || page,
          size: pagination.pageSize || 8
        }
      })
        .then(data => {
          // 设置数据
          setCount(data.dataCount);
          setDataSource(data.data);
        })
        .finally(() => {
          setLoading(false);
        });
    },
    [page]
  );

  // 使用定时器实现请求轮询，设置setInterval定时器前需要需要先清除已有的setInterval定时器
  const getList = useCallback(
    (params: { current?: number; pageSize?: number }) => {
      serviceFn(params);

      // 轮询
      clearInterval(timer.current);
      timer.current = window.setInterval(() => {
        serviceFn(params);
      }, 5000);
    },
    [serviceFn]
  );

  // 初始化请求列表，组件写在清除定时器
  useEffect(() => {
    getList({});

    return () => {
      // 清除定时器
      clearInterval(timer.current);
    };
  }, []);

  // 当请求页改变时，重新设置定时器，并设置当前页page
  const onPageChange = useCallback(
    (current: number) => {
      getList({
        current
      });
      setPage(current);
    },
    [getList]
  );

  return (
    <Table
      rowKey="id"
      dataSource={dataSource}
      pagination={{
        current: page,
        total: count,
        pageSize: 8,
        onChange: onPageChange
      }}
      loading={loading}
      columns={[
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '信息',
          dataIndex: 'message',
          key: 'message',
          render: (_, record: any) => {
            return <>{`${record.id}-${_}`}</>;
          }
        }
      ]}
    />
  );
};

export default App;