简单分页逻辑

简单分页逻辑

后端已经分页的情况: 前端需要什么--> pageSize,pageIndex,total,...其他可选参数(状态、日期...etc)，获取第一页数据、获取某一页数据

代码乱序：

<Table
    columns={columns}
    dataSource={filteredData}
    pagination={{
    position: ['bottomCenter'],
    hideOnSinglePage: true,
    pageSize: pageSize,
    current: pageIndex,
    total: total,
    onChange: fetchMoreData, //分页用
    }}
    className={styles.table}
        />
// 参数初始化：
  const [pageSize, setPageSize] = useState(7); 
  const [pageIndex, setPageIndex] = useState(1);
  const [total, setTotal] = useState(0); 
// 获取数据（例子中的是filterdData）
const fetchData = async (pageSize, pageIndex) => {
    try {
//这里在api中封装了接口
      const response = await api.someAxiosRequestHere({
        pageIndex: pageIndex,
        pageSize: pageSize,
   //这里可能还有其他的参数，可选项
      });
      const rawData = response.data.items;
      setTotal(response.data.total); // 设置总数据条数
      const formattedData = rawData?.map(item => ({
        key: item.balabala,
  id: item.balabala,
  //...其他可能的数据
      }));
      setData(formattedData); 
      setFilteredData(formattedData); 
    } catch (error) {
      console.error('数据获取失败:', error);
    } 
  };
获取下、上、特定一页数据:
  const fetchMoreData = async (pageIndex) => {
    setPageIndex(pageIndex);
    fetchData(pageSize, pageIndex);
    console.log(pageIndex);
  };
页面更新:
    useEffect(() => {
      fetchData(pageSize, pageIndex);
    }, [pageSize, pageIndex]);

当点击table中的下一页、上一页时，会触发pagination中onChange设置的事件（例子中就是fetchMoreData ）,pagination会将pageIndex设置点击的页数。由于pageIndex的值产生变化，useEffect触发，table页面更新

拓展

加入可选参数和搜索功能--->status,startDate,endDate
  const [statusFilter, setStatusFilter] = useState('');
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
在请求时添加可选参数
const fetchData = async (pageSize, pageIndex, status, start, end) => {
    try {
      const response = await api.someAxiosRequestHere({
        pageIndex: pageIndex,
        pageSize: pageSize,
        status: status, 
        start: start ? dayjs(start).format('YYYY-MM-DD') : undefined, 
        end: end ? dayjs(end).format('YYYY-MM-DD') : undefined, 
      });
}

添加状态选择、时间选择:

<Select
            placeholder="请选择"
            value={statusFilter}
            onChange={handleStatusChange}
          >
            <Option value="">全部状态</Option>
            <Option value='1'>状态1</Option>
            <Option value="2">状态2</Option>
            <Option value="3">状态3</Option>
          </Select>
<DatePicker
            placeholder="选择开始日期"
            value={startDate}
            onChange={handleStartDateChange}
          />
<DatePicker
            placeholder="选择结束日期"
            value={endDate}
            onChange={handleEndDateChange}
          />

如果需要实现点击某个状态、选择一个完整时间区间后就触发筛选，就用以下的触发函数：

const handleStatusChange = (value) => {
      setStatusFilter(value);
      setPageIndex(1);
      fetchData(pageSize, pageIndex, statusFilter, startDate, endDate)
    };

    const handleStartDateChange = (date) => {
      if (!date) {
        setStartDate(null);
        return;
      }
      setStartDate(date);
    };

    const handleEndDateChange = (date) => {
      if (!date) {
        setEndDate(null);
        return;
      }
      setEndDate(date);
setPageIndex(1);
      fetchData(pageSize, pageIndex, statusFilter, startDate, endDate)
    };
// 然后修改useEffect:
    useEffect(() => {
      fetchData(pageSize, pageIndex, statusFilter, startDate, endDate);
    }, [pageSize, pageIndex, statusFilter, startDate, endDate]);

注意

需要进行筛选的函数中，务必在查询前将页数设置为1，避免在非第一页进行筛选时，筛选不到数据的情况（尽管完整表格中有这样条件的数据,也会直接展示没有数据）