2016-03-31 09:40:55 +08:00
---
2019-11-15 14:35:25 +08:00
order: 10
2016-08-15 07:54:01 +08:00
title:
en-US: Ajax
zh-CN: 远程加载数据
2016-03-31 09:40:55 +08:00
---
2015-07-09 20:29:26 +08:00
2016-08-15 07:54:01 +08:00
## zh-CN
2015-12-09 21:49:32 +08:00
这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
另外,本例也展示了筛选排序功能如何交给服务端实现,列不需要指定具体的 `onFilter` 和 `sorter` 函数,而是在把筛选和排序的参数发到服务端来处理。
2020-06-28 22:41:59 +08:00
当使用 `rowSelection` 时,请设置 `rowSelection.preserveSelectedRowKeys` 属性以保留 `key` 。
2016-05-27 12:39:15 +08:00
**注意,此示例使用 [模拟接口 ](https://randomuser.me ),展示数据可能不准确,请打开网络面板查看请求。**
2015-07-14 20:04:14 +08:00
2020-11-27 18:29:21 +08:00
> 🛎️ 想要 3 分钟实现?试试 [ProTable](https://procomponents.ant.design/components/table)!
2016-08-15 08:07:03 +08:00
## en-US
2018-07-29 00:58:10 +08:00
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.
2016-08-15 08:07:03 +08:00
2020-06-28 22:41:59 +08:00
Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable selection.
2016-08-15 08:07:03 +08:00
**Note, this example use [Mock API ](https://randomuser.me ) that you can look up in Network Console.**
2019-05-07 14:57:32 +08:00
```jsx
2015-12-09 21:49:32 +08:00
import { Table } from 'antd';
2021-12-03 23:54:19 +08:00
import qs from 'qs';
2015-08-05 10:58:21 +08:00
2019-05-07 14:57:32 +08:00
const columns = [
{
title: 'Name',
dataIndex: 'name',
sorter: true,
render: name => `${name.first} ${name.last}` ,
width: '20%',
},
{
title: 'Gender',
dataIndex: 'gender',
2020-01-06 11:13:39 +08:00
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
2019-05-07 14:57:32 +08:00
width: '20%',
},
{
title: 'Email',
dataIndex: 'email',
},
];
2015-07-12 17:10:06 +08:00
2020-12-09 17:12:32 +08:00
const getRandomuserParams = params => ({
results: params.pagination.pageSize,
page: params.pagination.current,
...params,
});
2020-04-24 17:16:44 +08:00
2017-02-20 14:04:36 +08:00
class App extends React.Component {
state = {
data: [],
2020-04-24 17:16:44 +08:00
pagination: {
current: 1,
pageSize: 10,
},
2017-02-20 14:04:36 +08:00
loading: false,
};
2018-06-27 15:55:04 +08:00
2018-11-28 15:00:03 +08:00
componentDidMount() {
2020-04-24 17:16:44 +08:00
const { pagination } = this.state;
this.fetch({ pagination });
2018-11-28 15:00:03 +08:00
}
2017-02-20 14:04:36 +08:00
handleTableChange = (pagination, filters, sorter) => {
2016-03-29 17:32:03 +08:00
this.fetch({
2015-07-15 14:10:01 +08:00
sortField: sorter.field,
2016-03-29 17:32:03 +08:00
sortOrder: sorter.order,
2020-04-24 17:16:44 +08:00
pagination,
2016-03-29 17:32:03 +08:00
...filters,
});
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
2017-02-20 14:04:36 +08:00
fetch = (params = {}) => {
2015-12-09 21:49:32 +08:00
this.setState({ loading: true });
2021-12-03 23:54:19 +08:00
fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
.then(res => res.json())
.then(data => {
console.log(data);
this.setState({
loading: false,
data: data.results,
pagination: {
...params.pagination,
total: 200,
// 200 is mock data, you should read it from server
// total: data.totalCount,
},
});
2016-05-27 12:39:15 +08:00
});
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
2015-08-07 10:58:15 +08:00
render() {
2020-04-24 17:16:44 +08:00
const { data, pagination, loading } = this.state;
2015-12-09 21:49:32 +08:00
return (
2018-06-19 10:37:37 +08:00
< Table
columns={columns}
rowKey={record => record.login.uuid}
2020-04-24 17:16:44 +08:00
dataSource={data}
pagination={pagination}
loading={loading}
2016-06-06 13:54:10 +08:00
onChange={this.handleTableChange}
/>
2015-12-09 21:49:32 +08:00
);
2017-02-20 14:04:36 +08:00
}
}
2015-07-14 15:35:17 +08:00
2017-02-20 14:04:36 +08:00
ReactDOM.render(< App / > , mountNode);
2019-05-07 14:57:32 +08:00
```