Question

我想在List组件的每个分页部分中添加更改perPage选项值的功能。我基于@material-ui/core's TablePagination component创建了一个CustomPagination组件，以允许执行此操作，但出现了2个问题：

显示的范围位于第二页而不是第一页。单击上一页按钮无法访问第一页
如果我更改了perPage下拉列表的值：没有任何反应，则正确调用了onChangeRowsPerPage方法，但是setPerPage函数似乎什么也不做。另一方面，如果我单击下一页，则表将正确显示，并带有与所选选项相对应的行数，这很奇怪。仍然仍然无法访问表格的首页

下面是我的PostList.js组件的代码：

import { withStyles } from '@material-ui/core/styles';
import React from 'react';
import {
  Datagrid,
  List,
  Responsive,
  ShowButton,
  SimpleList,
  TextField
} from 'react-admin';

import Button from '@material-ui/core/Button';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import TablePagination from '@material-ui/core/TablePagination';

const CustomPagination = ({ page, perPage, total, setPage, setPerPage 
}) => {
const nbPages = Math.ceil(total / perPage) || 1;

const handleChangeRowsPerPage = event => {
    perPage = event.target.value;
    setPerPage(perPage);
};

const handleChangePage = (event, page) => {
    page < nbPages && page > 0 && setPage(page);
};

return (
    nbPages > 1 && (
        <TablePagination
            component="span"
            count={total}
            rowsPerPage={perPage}
            page={page}
            backIconButtonProps={{
                'aria-label': 'Previous Page'
            }}
            nextIconButtonProps={{
                'aria-label': 'Next Page'
            }}
            onChangePage={handleChangePage}
            labelRowsPerPage="Lignes par page"
            rowsPerPageOptions={[2, 5, 10, 50, 100]}
            onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      )
    );
};

const styles = theme => ({
  title: {
    maxWidth: '20em',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
});

const PostList = withStyles(styles)(({ classes, ...props }) => (
  <List
    {...props}
    sort={{ field: 'published_at', order: 'DESC' }}
    perPage={2}
    pagination={<CustomPagination />}
  >
    <Responsive
        small={
            <SimpleList
                linkType="show"
                primaryText={record => record.title}
            />
        }
        medium={
            <Datagrid>
                <TextField source="id" />
                <TextField source="title" cellClassName={classes.title} />
                <ShowButton />
            </Datagrid>
        }
    />
  </List>
));

export default PostList;

还有codesandbox here

Answer 1

默认情况下，即将发布的2.3版本将提供此功能。有关详细信息，请参见此请求请求：https://github.com/marmelab/react-admin/pull/2173

在分页部分中动态选择每页行数

1 个答案: