服务器端分页后无法转到下一页

时间:2018-11-30 15:44:20

标签: java reactjs pagination react-redux material-ui

我正在尝试对前端和后端实施分页。 在前端,我有:

    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进行服务器端分页。

0 个答案:

没有答案