我正在尝试对前端和后端实施分页。 在前端,我有:
private fetchOrders = async (prevProps) => {
if (!prevProps || this.props.location.pathname !== prevProps.location.pathname || this.props.location.search !== prevProps.location.search) {
try {
await this.props.fetchOrders(this.state.searchFilter, deparamSearch(this.props.location.search));
} catch (error) {
console.error(error);
this.setState({ error });
}
}
}
private handlePageChange = (e, page) => {
// for now this will reset the page count
this.props.history.push(`${this.props.location.pathname}?page=${page + 1}&count=${this.props.count}`);
}
private handleCountChange = ({ target: { value } }) => {
// for now this will reset the page count
this.props.history.push(`${this.props.location.pathname}?page=1&count=${value}`);
}
,然后在render
方法中:
<MuiTable
padding="dense"
data={pageData}
pagination={{
count: data ? data.length : 0,
rowsPerPage: count,
page: page - 1, // 0-based
rowsPerPageOptions: [10, 25, 100, 500],
onChangePage: this.handlePageChange, // this.props.history.push(`${this.props.location.pathname}?page=1&sort=${this.props.sort}&count=${value}`),
onChangeRowsPerPage: this.handleCountChange, // this.setState({ perPage: e.target.value }),
}}
columns={[
{
const mapStateToProps = (state , props) => {
const search: any = deparamSearch(props.location.search);
return {
orders: (state.orders.list || []),
page: Number.parseInt(search.page || 1),
count: search.count || 10,
};
};
和后端:
return dslContext.select(...
.
.
.
.limit(query.count().orElse(defaultCount))
.offset(((query.page().orElse(1) - 1) * query.count().orElse(defaultCount))+1) //TODO: Rey: use count and page with limit and offset
.fetch()
问题在于它无法检索任何数据。如果删除.offset(((query.page().orElse(1) - 1) * query.count().orElse(defaultCount))+1)
,则会看到一些数据(当然,没有使用适当的偏移量),但无法导航到下一页。
我不确定是否可以使用材质UI进行服务器端分页。