下载 Ant Design
npm install antd --save
引入
import { Pagination} from "antd";
state = {
list: [],
currentPage: 1,
pageSize: 5,
total: 0,
search: "",
};
页面中使用
current={currentPage}为设置的默认页数, pageSize={pageSize}为设置的条数
total为总页数
<Pagination
current={currentPage}
pageSize={pageSize}
className="pga"
total={total}
showSizeChanger
showQuickJumper
onChange={this.handlePageChange}
/>
给onChange 的handlePageChange 的分页逻辑
handlePageChange = (page, pageSize) => {
const { search } = this.state; //search为state设置的搜索框的值
this.setState(
{
currentPage: page,
pageSize: pageSize,
},
() => {
if (search) {
TeacherSearch({ name: search, page: page, pagelimit: pageSize }) //搜索调用的接口
.then((res) => {
this.setState({
list: res.data.data || [],
total: res.data.pagecount || 0,
});
})
.catch((err) => {
console.log(err);
});
} else {
this.fetchData();
}
}
);
};
//获取到列表全部数据
fetchData = () => {
const { currentPage, pageSize, search } = this.state;
let params = { page: currentPage, pagelimit: pageSize };
if (search) {
params.name = search;
}
TeacherList(params)
.then((res) => {
this.setState({
list: res.data.data,
total: res.data.pagecount,
});
console.log(res);
})
.catch((err) => {
console.log(err);
});
};
//搜索分页
onSearch = (e) => {
const { name, value } = e.target;
const { currentPage, pageSize } = this.state;
this.setState({ //获取到搜索框的值
[name]: value,
});
if (value === "") { //搜索框为空返回全部的数据
this.fetchData();
} else {
TeacherSearch({ name: value, page: currentPage, pagelimit: pageSize })
.then((res) => {
this.setState({
list: res.data.data || [],
total: res.data.pagecount || 0,
});
})
.catch((err) => {
console.log(err);
});
}
};