Question

我正在构建一个应用程序，以显示来自django rest api的数据。 django rest api中的数据使用pagination_class分页。因此，我试图使前端分页完全依赖于后端。

当前，数据已获取并加载到api（http://localhost:8000/cluster/37/tasks）的首页中，在我的分页中，我想尝试两次试验：

我想在分页中单击“下一步”时，它应该触发获取以从api加载下一页。在这种情况下，它将是第二页，因此应该从（http://localhost:8000/cluster/37/tasks?page=2）
我有一个关于分页的页码列表，因此当我单击第四页时，它应该触发从api（http://localhost:8000/cluster/37/tasks?page=4的第四页进行抓取

我该如何实现。以下是我的代码中的重要部分，其中包含更多详细信息：

class TasksApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: [
        { headerName: 'Status', field: 'status' },
        { headerName: 'Started', field: 'rut_creation_time' },
        {
          headerName: 'Duration', field: 'duration'
        },
        { headerName: 'Run', field: 'run_id' },
        { headerName: 'Total Requests', valueGetter: '' },
        {
          headerName: 'Download',
          cellRenderer: 'btnCellRenderer',
          cellRendererParams: {
            clicked: function (params) {
              console.log(params)
            }
          }
        }
      ],
      defaultColDef: { resizable: true },
      frameworkComponents: {
        btnCellRenderer: BtnCellRenderer,
      },
      rowData: null,
      rowModelType: 'serverSide',
      cacheBlockSize: 10,
      dataLength: 0,
      id: this.props.location.state.id,
      headerHeight: 39,
      rowHeight: 49,
      paginationPageSize: 10,
      totalPages: null,
      currentPage: null,
      pageSize: null,
      pageNumberList: [],
      pageSizeList: [],
      startIndex: 0,
      endIndex: 5,
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
    const updateData = data => {
      this.setState({ 
        rowData: data['results'],//returns the data of the page 
        dataLength: data['totalDataOnPage'], //returns the length of data in page
        totalData: data['totalData'],//returns length of total data
        currentPage: data['currentPage'],//returns the current page number
        totalPages:data['totalPages'],//returns the total pages
        nextLink: data['nextPage'],//contains the next link
        previousLink : data['previousPage']//contains the previous link
      })
      var Server = createServer(this.state.rowData);
      var datasource = createServerSideDatasource(Server);
      params.api.setServerSideDatasource(datasource);
    };

    fetch(`http://localhost:8000/cluster/${this.state.id}/tasks`, options)
      .then(res => res.json())
      .then(data => updateData(data))
      .catch(err => console.log(err))
  };

  onBtNext = () => {
    //how do I attempt this to lead to the next page (fetch from http://localhost:8000/cluster/37/tasks?page=<next-page>)
  };

  gotoPage = () => {
    //how do I attempt this to lead to a specific page. for example if I click on page 4, it should trigger fetch from `http://localhost:8000/cluster/37/tasks?page=4`
 }

  render() {
      console.log('data', this.state.rowData)
      console.log('pages', this.state.totalPages)
      console.log('next', this.state.nextLink)
      console.log('previous', this.state.previousLink)
    return (
      <>
        <Wrapper>
          <InnerWrapper>
            <TableContent>
              <Fragment>
                <FullScreenDataGrid style={{ flexDirection: 'column', flex: '1 1 0%' }}>
                  <div className="ag-matrix" style={{ position: 'absolute', left: '0px', top: '0px', right: '0px', bottom: '0px' }}>
                    <AgGridReact
                      columnDefs={this.state.columnDefs}
                      rowModelType={this.state.rowModelType}
                      cacheBlockSize={this.state.cacheBlockSize}
                      debug={true}
                      defaultColDef={this.state.defaultColDef}
                      headerHeight={this.state.headerHeight}
                      rowHeight={this.state.rowHeight}
                      overlayNoRowsTemplate={this.state.overlayNoRowsTemplate}
                      pagination={true}
                      // onRowClicked={this.rowClicked}
                      frameworkComponents={this.state.frameworkComponents}
                      // paginationPageSize={this.state.paginationPageSize}
                      onGridReady={this.onGridReady}
                      suppressPaginationPanel={true}
                      onPaginationChanged={this.onPaginationChanged.bind(this)}
                    />
                  </div>
                </FullScreenDataGrid>
                <div className="Pagination-View MatrixGridFooter_DataGridFooter_3NolQ" style={{ height: '64px', marginTop: '2px' }}>
                  <PaginationSectorTwo>
//previous button comes here
                      <PageDirection onClick={() => this.onBtPrevious()}>
                        <ChevronLeft style={{ padding: '5px' }} />
                      </PageDirection>
//list of page numbers
                    <PageList>
                      {
                        this.state.pageNumberList.slice(this.state.startIndex, this.state.endIndex).map(PageNumber => (
                          <Page onClick={this.gotoPage} key={PageNumber} value={PageNumber} className={PageNumber === this.state.currentPage ? 'linkactive' : ''}>
                            {PageNumber}
                          </Page>
                        ))}
                    </PageList>
//next button comes here.
                      <PageDirection onClick={() => this.onBtNext()} style={{marginLeft: '15px'}}>
                        <ChevronRight style={{ padding: '5px' }} />
                      </PageDirection> 
                  </PaginationSectorTwo>
                </div>
              </Fragment>
            </TableContent>
          </InnerWrapper>
        </Wrapper>
      </>

    )
  }

}

除了我正在使用ag-grid来显示来自django rest framework api的数据谢谢。

Answer 1

使用 Hooks 的功能组件更容易。但是，对于类组件，您可以通过调用 this.setState({}, () => {//callback})

的回调函数来解决此问题

这里有一个快速的 CodeSandbox 示例，可能会对您有所帮助。

单击下一步按钮时如何触发获取以选择下一页

1 个答案: