Material-ui表分页

Question

我使用Material-ui表来列出数据。表将一次从远程服务器加载所有数据。有没有办法通过分页加载数据，因为页面更改数据必须从远程获取。

当页面加载时，我将从以下代码中获取数据。

const options = { method: 'GET', headers: { Origin: '*' } };
    fetch(`https://some-url/user_groups`, options)
        .then(function (result) {
           //i will get data here
        })
        .catch(error => console.log('error while fetching ', error));

Answer 1

请执行以下步骤：

步骤1.更改服务器端以仅返回1页数据，并返回可用记录的数量。

/api/getData?offset=5&limit=10

步骤2.在react组件或redux存储上，创建以下状态：

{
    data: list of data item to display on the table
    page: the current page of the table
    resultCount: number of available records
}

步骤3.实现loadData加载当前页面的数据和结果计数。

步骤4.在组件挂载和页面更改事件中，重新加载数据。

Answer 2

是的，您可以通过向分页切片逻辑添加条件来实现

rows.slice((useDbPagination ? 0 : page) * rowsPerPage,
           (useDbPagination ? 0 : page) * rowsPerPage + rowsPerPage).map(/*render row here*/);