reactjs - 获取分页反应的firestore收集记录计数

问题描述

我有一个表格来显示用户集合，包括搜索过滤器。现在我想添加一个 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}
        />

标签： reactjsgoogle-cloud-firestore

reactjs - 获取分页反应的firestore收集记录计数

问题描述

解决方案

推荐阅读