材料表中的分页

Question

我有一个页面，其中包含一些输入字段供用户输入一些搜索关键字，一旦用户单击提交按钮，后端将一次返回 10 个结果。我想要实现的是在单击表格右下角的“下一页”图标时返回接下来的 10 个结果。我知道有“remote data”示例来说明这种用例，但默认情况下它会尝试在页面加载时从后端检索，而我的页面需要用户输入才能开始，我们如何自定义“下一页”图标的行为所以它不进行初始提取？

--更新--

以下面的代码为例，我有几个文本字段和一个提交按钮，只有在用户输入一些条件（例如年龄字段中的 15）并单击提交按钮之后，它才会向后端发起第一个查询，前端的查询代码几乎就是普通的https异步请求：

.... text fields .......
{/*submit button*/}
<div className="submit-button">
    <Button variant="contained" size="large" color="primary" className={classes.margin}
            disabled={submitButtonDisabled()} onClick={handleSubmitForm}>
        {hasMoreRecords ? 'Load More' : 'Submit'}
    </Button>
</div>
{/*es query result table*/}
<div className="s3-key-table">
    <MaterialTable
        columns={[
            {
                title: 'Case Number', field: 'caseNumber', width: '0px',
                render: rowData => <Link href='#' onClick={() => handleCdsCaseRetrieval(rowData.s3_key)}
                                         color='secondary'>{rowData.case_number}</Link>
            },
            {title: 'Account Id', field: 'account_id', width: '0px'},
            {title: 'Customer Id', field: 'customer_id', width: '0px'},
            {title: 'Status', field: 'status', width: '0px'},
            {title: 'Tenant', field: 'tenant', width: '0px'},
            {title: 'Business', field: 'business', width: '0px'},
            {title: 'Owner', field: 'owner', width: '0px'},
            {title: 'Created Date', field: 'created_date', width: '0px'},
            {title: 'Closed Date', field: 'closed_date', width: '0px'},
        ]}
        data={queryResult}
        title="Salesforce Cases"
        icons={tableIcons}
        options={{
            pageSize: 10,
            pageSizeOptions: [10]
        }}
    />
</div>

Answer 1

我这样做的方式是使用数据表 - 在加载时隐藏所有选项。然后，当用户键入内容时，选项会加载。