客户端分页
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 }