react_5

客户端分页

import { Table } from 'antd'
import { ColumnsType, TablePaginationConfig } from "antd/es/table";
import axios from 'axios'
import { useEffect, useState } from 'react'
import { R, Student } from '../model/Student'

export default function A3() {
  const [students, setStudents] = useState<Student[]>([])
  const [loading, setLoading] = useState(true)
  const [pagination, setPagination] = useState<TablePaginationConfig>(
    {current:1, pageSize:5}
  )

  // 参数: 新的分页数据
  function onTableChange(newPagination: TablePaginationConfig) {
    setPagination(newPagination)
  }

  useEffect(() => {
    async function getStudents() {
      const resp = await axios.get<R<Student[]>>(
        'http://localhost:8080/api/students'
      )
      setStudents(resp.data.data)
      setLoading(false)
    }

    getStudents()
  }, [])

  // ... 省略

  // pagination: 分页数据
  // onChange: 当页号，页大小改变时触发
  return (
    <Table
      columns={columns}
      dataSource={students}
      rowKey='id'
      loading={loading}
      pagination={pagination}
      onChange={onTableChange}></Table>
  )
}

• 本例还是查询所有数据，分页是客户端 Table 组件自己实现的

• 服务端分页

  import { Table } from 'antd'
  import { ColumnsType, TablePaginationConfig } from "antd/es/table";
  import axios from 'axios'
  import { useEffect, useState } from 'react'
  import { PageResp, R, Student } from '../model/Student'
  
  export default function A4() {
    const [students, setStudents] = useState<Student[]>([])
    const [loading, setLoading] = useState(true)
    const [pagination, setPagination] = useState<TablePaginationConfig>({
      current: 1,
      pageSize: 5,
    })
  
    function onTableChange(newPagination: TablePaginationConfig) {
      setPagination(newPagination)
    }
  
    useEffect(() => {
      async function getStudents() {
        // params 用来给请求添加 url 后的 ? 参数
        const resp = await axios.get<R<PageResp<Student>>>(
          'http://localhost:8080/api/students/q',
          {
            params: {
              page: pagination.current,
              size: pagination.pageSize,
            },
          }
        )
        // 返回结果中：list 代表当前页集合, total 代表总记录数
        setStudents(resp.data.data.list)
        setPagination((old) => {
          return { ...old, total: resp.data.data.total }
        })
        setLoading(false)
      }
  
      getStudents()
    }, [pagination.current, pagination.pageSize])
    // useEffect 需要在依赖项( current 和 pageSize ) 改变时重新执行
  
    const columns: ColumnsType<Student> = [
      {
        title: '编号',
        dataIndex: 'id',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '性别',
        dataIndex: 'sex',
      },
      {
        title: '年龄',
        dataIndex: 'age',
      },
    ]
  
    return (
      <Table
        columns={columns}
        dataSource={students}
        rowKey='id'
        loading={loading}
        pagination={pagination}
        onChange={onTableChange}></Table>
    )
  }

• 本例需要服务端配合来实现分页，参见代码中新加的注释

• 其中 PageResp 类型定义为

• export interface PageResp<T> {
    list: T[],
    total: number
  }