2017-12-05 10 views
-1

데이터를 나열하기 위해 Material-UI 테이블을 사용하고 있습니다. 테이블은 원격 서버에서 한 번에 모든 데이터를로드합니다. 페이지 변경 데이터를 원격 페이지에서 가져와야하므로 페이지 매김을 통해 데이터를로드 할 수있는 방법이 있습니까?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)); 
+0

어디에서 데이터를 가져 오나요? 그리고 어떻게 지내니? fetchData 함수를 필터링하여 액세스중인 페이지를 기반으로 검색하는 값의 수를 제한 할 수 있습니다. 더 많은 정보가 없으면 더 많은 것을 돕는 것이 어렵습니다. – Rodius

+0

시도한 내용, 현재 데이터를 가져 오는 방법, 문제를 이해하는 데 도움이되는 정보 및 도움을 줄 수 있습니까? – 3Dos

+0

제한된 수의 값을 기반으로 데이터를 얻을 수 있습니다. 그러나 머티리얼에서는 페이지 매김을 사용하여 데이터를 가져 오는 옵션이 없습니다. –

답변

0

팔로우 다음 단계 :

1 단계 변경 서버 측 데이터의 1 페이지를 반환하고, 또한 가능한 레코드 수를 반환합니다. 3. 데이터의 현재 페이지 & 결과 수를로드 할 loadData을 구현

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

단계 : 구성 요소 또는 REDUX 저장소를 반응 온

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

2 단계는 다음과 같은 상태를 만들 수 있습니다.

단계 4. 구성 요소 마운트 & 페이지 변경 이벤트에서 데이터를 다시로드하십시오.