【发布时间】:2019-10-06 17:29:20
【问题描述】:
我有一个表格来显示用户集合,包括搜索过滤器。现在我想添加一个 material-ui 分页,我想在其中传递总记录数。 分页工作正常。我怎样才能得到它?
任何帮助表示赞赏。!
表格和表格分页代码
<Table className={classes.table}>
<TableHead>
<TableRow className={classes.tableHeader}>
<TableCell >#</TableCell>
<TableCell ></TableCell>
<TableCell>Name</TableCell>
<TableCell align="right">Phone</TableCell>
<TableCell align="right">Role</TableCell>
<TableCell align="right">Service</TableCell>
<TableCell align="right">Location</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredList && filteredList
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map(row => (
<TableRow key={row.id}>
<TableCell>{items++}</TableCell>
<TableCell align="right">
<Link to={'/admin/profile/' + row.id} key={row.id} >
<Tooltip title="View Profile">
<UserIcon/>
</Tooltip>
</Link>
</TableCell>
<TableCell component="th" scope="row">
{row.sp_Name}
</TableCell>
<TableCell align="right">{row.sp_Phone}</TableCell>
<TableCell align="right">{row.sp_Role}</TableCell>
<TableCell align="right">{row.sp_Service}</TableCell>
<TableCell align="right">{row.sp_Location}</TableCell>
{/* <TableCell align="right">
<ApproveIcon onClick={this.handleClickDialogOpen} className={classes.icon} />
</TableCell> */}
<TableCell align="right">
<Tooltip title="Delete">
<DeleteIcon onClick={() => this.handleClickDialogOpen(row.id)} className={classes.icon} />
{/* <DeleteIcon onClick={() => deleteSP(row.id)} className={classes.icon} /> */}
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
//count={5}
count ={filteredList.length} -- I want to pass count
rowsPerPage={this.state.rowsPerPage}
page={this.state.page}
backIconButtonProps={{
'aria-label': 'Previous Page',
}}
nextIconButtonProps={{
'aria-label': 'Next Page',
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
/>
【问题讨论】:
标签: reactjs google-cloud-firestore