问题描述
我正在构建一个应用程序,以显示来自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的数据
谢谢。
解决方法
使用 Hooks 的功能组件更容易。但是,对于类组件,您可以通过调用 this.setState({},() => {//callback})
这里有一个快速的 CodeSandbox 示例,可能会对您有所帮助。