mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 18:09:22 +08:00
142 lines
3.6 KiB
Markdown
142 lines
3.6 KiB
Markdown
---
|
||
order: 10
|
||
title:
|
||
en-US: Ajax
|
||
zh-CN: 远程加载数据
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
|
||
|
||
另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 `onFilter` 和 `sorter` 函数，而是在把筛选和排序的参数发到服务端来处理。
|
||
|
||
当使用 `rowSelection` 时，请设置 `rowSelection.preserveSelectedRowKeys` 属性以保留 `key`。
|
||
|
||
**注意，此示例使用 [模拟接口](https://randomuser.me)，展示数据可能不准确，请打开网络面板查看请求。**
|
||
|
||
> 🛎️ 想要 3 分钟实现？试试 [ProTable](https://procomponents.ant.design/components/table)！
|
||
|
||
## en-US
|
||
|
||
This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.
|
||
|
||
Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable selection.
|
||
|
||
**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
|
||
|
||
```tsx
|
||
import { Table } from 'antd';
|
||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||
import type { FilterValue, SorterResult } from 'antd/es/table/interface';
|
||
import qs from 'qs';
|
||
import React, { useEffect, useState } from 'react';
|
||
|
||
interface DataType {
|
||
name: {
|
||
first: string;
|
||
last: string;
|
||
};
|
||
gender: string;
|
||
email: string;
|
||
login: {
|
||
uuid: string;
|
||
};
|
||
}
|
||
|
||
interface TableParams {
|
||
pagination?: TablePaginationConfig;
|
||
sortField?: string;
|
||
sortOrder?: string;
|
||
filters?: Record<string, FilterValue>;
|
||
}
|
||
|
||
const columns: ColumnsType<DataType> = [
|
||
{
|
||
title: 'Name',
|
||
dataIndex: 'name',
|
||
sorter: true,
|
||
render: name => `${name.first} ${name.last}`,
|
||
width: '20%',
|
||
},
|
||
{
|
||
title: 'Gender',
|
||
dataIndex: 'gender',
|
||
filters: [
|
||
{ text: 'Male', value: 'male' },
|
||
{ text: 'Female', value: 'female' },
|
||
],
|
||
width: '20%',
|
||
},
|
||
{
|
||
title: 'Email',
|
||
dataIndex: 'email',
|
||
},
|
||
];
|
||
|
||
const getRandomuserParams = (params: TableParams) => ({
|
||
results: params.pagination?.pageSize,
|
||
page: params.pagination?.current,
|
||
...params,
|
||
});
|
||
|
||
const App: React.FC = () => {
|
||
const [data, setData] = useState();
|
||
const [loading, setLoading] = useState(false);
|
||
const [tableParams, setTableParams] = useState<TableParams>({
|
||
pagination: {
|
||
current: 1,
|
||
pageSize: 10,
|
||
},
|
||
});
|
||
|
||
const fetchData = () => {
|
||
setLoading(true);
|
||
fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(tableParams))}`)
|
||
.then(res => res.json())
|
||
.then(({ results }) => {
|
||
setData(results);
|
||
setLoading(false);
|
||
setTableParams({
|
||
...tableParams,
|
||
pagination: {
|
||
...tableParams.pagination,
|
||
total: 200,
|
||
// 200 is mock data, you should read it from server
|
||
// total: data.totalCount,
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchData();
|
||
}, [JSON.stringify(tableParams)]);
|
||
|
||
const handleTableChange = (
|
||
pagination: TablePaginationConfig,
|
||
filters: Record<string, FilterValue>,
|
||
sorter: SorterResult<DataType>,
|
||
) => {
|
||
setTableParams({
|
||
pagination,
|
||
filters,
|
||
...sorter,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<Table
|
||
columns={columns}
|
||
rowKey={record => record.login.uuid}
|
||
dataSource={data}
|
||
pagination={tableParams.pagination}
|
||
loading={loading}
|
||
onChange={handleTableChange}
|
||
/>
|
||
);
|
||
};
|
||
|
||
export default App;
|
||
```
|