javascript - 与 Material UI 表分页 react 显示所有条目

标签 javascript reactjs material-ui

我有一个 React 数据表,我最近在其中添加了当您有很多条目时的分页。我希望通过在 rowsPerPageOptions 下拉菜单中选择“全部”来显示表格中的所有条目。到目前为止,我设法获得了要显示在菜单中的所有条目的数量。

我现在需要的是用字符串“all”标记entries.length 对象并让它显示在菜单中。这可能吗?

当我尝试类似 all.push({label: this.state.entries.length}); 的时候,我得到了错误:

Objects are not valid as a React child (found: object with keys {label}). If you meant to render a collection of children, use an array instead.

这让我觉得我不能在菜单中使用带有键的数组,所以我必须以不同的方式显示该值。

代码:

编辑:在 morteza ataiy 评论并指出错误后,将 all 变量移动到渲染函数中。

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            );
    }

Image: The last entry is what I want to change

请记住,我是 React 和 JavaScript 的新手,在此先感谢!

最佳答案

您可以使用标签。请引用代码

<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

您可以将 -1 传递给后端并针对此编写查询。

关于javascript - 与 Material UI 表分页 react 显示所有条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51857720/

相关文章:

javascript - 如何在 Angular 翻译中传递参数

javascript - 如何在 React.js 中将文本的一部分加粗?

reactjs - 如何从 Intellij 运行/执行/调试 react/redux 应用程序

angular - 垫日期开始日期结束日期验证 Angular 8

reactjs - React 和 Material 用户界面 : show and hide component onClick

javascript - RxJS:Observable.create() 与 Observable.from()

javascript - 这是 Node.js 中的正确代码吗? (变量作用域)

css - 使用 props 设置 '&:hover' background-color

material-ui - 如何从 Flat 或 Raised 按钮元素触发 Material UI 日期选择器元素

javascript - Knockout Js函数没有出现在页面上