Question

我有一个表来显示用户集合，包括搜索过滤器。现在，我想添加一个材质用户界面分页，我想在其中传递总记录数。分页效果很好。我该怎么办？

任何帮助表示赞赏！！

表格和表格的分页代码

 <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}
        />

Answer 1

Firestore不会对集合中的文档数进行计数。如果需要，则必须自己存储并保持最新。有关此示例，请参见aggregation queries和distributed counters上的文档。

另请参阅：Firebase firestore collection count

获取分页的Firestore收集记录计数反应

1 个答案: