Question

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

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

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页数据，并返回可用记录数。

if( !is_front_page() && !is_search() && !is_page( 'article', 'preview' ) && !is_category() && !is_tax() && !is_tag() ){
//code goes here..
}

步骤2.在您的react组件或redux store上，创建以下状态：

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

步骤3.实施{ data: list of data item to display on the table page: the current page of the table resultCount: number of available records }以加载当前数据页面＆amp;结果计数。

步骤4.组件安装＆amp;页面更改事件，重新加载数据。

Answer 2

是的，您可以通过在分页切片逻辑中添加条件

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

Material-ui表格分页

2 个答案: